全自动数据表格JQuery版

时间:2024-01-03 11:16:38
由于最近工作上有些变动,已经快一个月没有写博客了。上一篇博客[React]全自动数据表格组件——BodeGrid介绍了全自动数据表格的设计思路以及分享了一个react.js的实现。但是现实情况中为了节约开发成本,很多中小型企业是很难做到前后端完全分离的,加上目前国内使用react.js的公司可能是太少了吧,于是又折腾着写了一个JQuery版本的,结合mvc的模板页也达到了相同的效果(代码量方面),有兴趣的小伙伴也可以尝试写一写angular或者vue版本的,用起来真的能少写很多代码的。
使用到的js库:
layer弹出层:http://layer.layui.com/

效果图-列表页:
全自动数据表格JQuery版
全自动数据表格JQuery版
效果图-弹出框:
 全自动数据表格JQuery版
视图页全部代码:
@{
ViewBag.Title = "Table";
Layout = "~/Areas/Admin/Views/Shared/_GridLayout.cshtml";
} @section customScript{
<script type="text/javascript">
var enums = @Html.Raw(Json.Encode(@ViewBag.Enums));
url = {
read: "/api/services/product/products/GetProductPagedList",
add: "/api/services/product/products/CreateProduct",
edit: "/api/services/product/products/UpdateProduct",
delete: "/api/services/product/products/DeleteProduct"
};
columns = [
{ data: "id", title: "编号" },
{ data: "name", title: "商品名称", type: "text", query: true, editor: {} },
{ data: "brief", title: "商品简介", type: "textarea", query: true, editor: {} },
//{ data: "detail", title: "商品详情", type: "richtext", query: true, editor: {} },
{ data: "price", title: "价格", type: "number", query: true, editor: {} },
{ data: "cover2", title: "封面", type: "img", editor: {} },
{ data: "isOnShelf", title: "是否上架", type: "switch", editor: {} },
{ data: "enumTest", title: "枚举测试", type: "dropdown", editor: {},source:{data:enums} },
{ data: "onShelfTime", title: "上架时间", type: "timepicker", editor: {} },
{
title: "操作选项",
type: "command",
actions: [
{
name: "操作",
icon: "fa-trash-o",
onClick: function (d) {
alert(d["id"]);
}
}
]
}
];
</script>
}
服务端代码:
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Threading.Tasks;
using Abp.Application.Services;
using Abp.Application.Services.Dto;
using Abp.Application.Services.Query;
using Abp.AutoMapper;
using Abp.Domain.Repositories;
using BodeAbp.Product.Products.Dtos; namespace BodeAbp.Product.Products
{
/// <summary>
/// 商品 应用服务
/// </summary>
public class ProductsAppService : ApplicationService, IProductsAppService
{
private readonly IRepository<Domain.Product,long> _productRepository; /// <summary>
/// 构造函数
/// </summary>
/// <param name="productRepository"></param>
public ProductsAppService(IRepository<Domain.Product, long> productRepository)
{
_productRepository = productRepository;
} /// <inheritdoc/>
public async Task<PagedResultOutput<GetProductListOutput>> GetProductPagedList(QueryListPagedRequestInput input)
{
int total;
var list = await _productRepository.GetAll().Where(input, out total).ToListAsync();
return new PagedResultOutput<GetProductListOutput>(total, list.MapTo<List<GetProductListOutput>>());
} /// <inheritdoc/>
public async Task CreateProduct(CreateProductInput input)
{
var product = input.MapTo<Domain.Product>();
await _productRepository.InsertAsync(product);
} /// <inheritdoc/>
public async Task UpdateProduct(UpdateProductInput input)
{
var product = await _productRepository.GetAsync(input.Id);
input.MapTo(product);
await _productRepository.UpdateAsync(product);
} /// <inheritdoc/>
public async Task DeleteProduct(IdInput input)
{
await _productRepository.DeleteAsync(input.Id);
}
}
}
表格请求Json格式:
{
"pageIndex":,
"pageSize":,
"sortConditions":[
{
"sortField":"name",
"listSortDirection":
}
],
"filterGroup":{
"rules":[
{
"field":"displayName",
"operate":"contains",
"value":"a"
}
]
}
}

服务端响应Json格式:

{
"success": true,
"result": {
"totalCount": ,
"items": [
{
"name": "名称222",
"brief": "简介222",
"detail": "<p>描述222</p>",
"price": 3.33,
"cover2": "xx",
"isOnShelf": true,
"onShelfTime": "1899-12-03T03:00:00+08:00",
"enumTest": ,
"id":
}
]
},
"error": null,
"unAuthorizedRequest": false
}

items中的字段应与视图页中列配置一一对应,这样很少的代码就能完全实现数据的展示、分页、新增、编辑、删除、查询、排序等功能,并且还统一了编码方式,方便质量把控和后期维护。数据表格核心文件:bode.grid.js。在BodeAbp项目中可以看到源码以及一个比较完善的demo。整个demo依然遵循前后端分离的模式,只用到了MVC的视图页作为前端展示。BodeAbp项目地址:https://github.com/liuxx001/BodeAbp


bode.grid.js源码这里就不过多介绍了,思路和上一篇博客所说一致,只是换了一种实现方式而已。JQuery版表格与React.js版的api还是有一些出入,不过总体来说功能是增强了,具体介绍如下:
初始化方式:
var table=new $.bode.grid("#dataTable", {...});
表格api:
参数 类型 说明 默认值
url object

远程接口配置,示例:{read:"",add:"",edit:"",delete:""}

其中add、edit、delete属于功能项,不配置url相关功能不会显示

 
columns array[object] 列配置,下文会详细介绍  
actions array[object]

右上角操作按钮,默认添加"搜索";

如果url配置了add,则添加"新增"选项

 
imgSaveUrl string img类型图片上传地址 "/api/File/UploadPic"
formId string 弹出框id "bode-grid-autoform"
formWidth string 弹出框宽度,支持px与百分数

无富文本编辑器时:40%;

有富文本编辑器时:60%

pageIndex number 页序号 1
pageSize number 每页数量 15
beforeInit function 初始化前执行  
initComplete function 初始化后执行  
loadDataComplete function 每次数据重新加载后执行  
column属性详细介绍:
title string 表头显示标题  
data string 从数据源获取对应的字段名  
type string

该列的类型,现支持的类型有:

text、textarea、richtext、number、switch、dropdown、

img、datepicker、timepicker、hide、command

 
query boolean 是否允许查询 false
editor object 编辑相关配置,还可以继续完善  
source object

dropdown类型下拉数据源,格式:

{data:[{value:"xx",text:"vv"}],textField:"xx",valueField:"xx" }

textField默认"text";

valueField默认"value"

sortDisable boolean 是否禁止排序 false
render function(v,d) 自定义列渲染事件,v表示当前单元格的数据,d表示当前行的数据  
editor object

{ap:"hide",ep:"disabled"};ap:新增模式,ep:编辑模式;'hide'表示

隐藏该列,'disabled'表示该列不可编辑

 

目前整个bode.grid.js还有很多需要完善地方,我会在以后的使用过程中继续完善修改,本次分享仅供交流,如要使用,要做好填坑的准备。其实整个源码还是比较简单的,只有600行代码,有兴趣的小伙伴可以看看,欢迎交流。