全自动数据表格JQuery版

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

 

使用到的js库：

jquery：https://jquery.com/

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

bootstrap：http://www.bootcss.com/

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

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

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

select2：http://select2.github.io/

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

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

 

---

效果图-列表页：

 

效果图-弹出框：

 

 

视图页全部代码：

@{
    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行代码，有兴趣的小伙伴可以看看，欢迎交流。