使用到的js库：

jquery：https://jquery.com/

layer弹出层：//layer.layui.com/

bootstrap：//www.bootcss.com/

bootstrap-datatable：https://editor.datatables.net/examples/styling/bootstrap.html

bootstrap-datetimepicker：//www.bootcss.com/p/bootstrap-datetimepicker/

beyondadmin：//beyondadmin-v1.6.0.s3-website-us-east-1.amazonaws.com/

select2：//select2.github.io/

webupoader：//fex-team.github.io/webuploader/

ueditor：//ueditor.baidu.com/website/index.html

效果图-列表页：

效果图-弹出框：

{
    "pageIndex":1,
    "pageSize":15,
    "sortConditions":[
        {
            "sortField":"name",
            "listSortDirection":1
        }
    ],
    "filterGroup":{
        "rules":[
            {
                "field":"displayName",
                "operate":"contains",
                "value":"a"
            }
        ]
    }
}

服务端响应Json格式：

{
  "success": true,
  "result": {
    "totalCount": 4,
    "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": 1,
        "id": 3
      }
    ]
  },
  "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", {...});