动态构建easyUI grid

项目中有个业务场景，就是基于配置能够动态展示采集到数据库中的信息，基于sql语句，动态构建列表。

第一步：报表的增删查改，主要维护报表名称，列名（表头显示）和sql语句，列名跟sql语句输出字段保持一致

 

第二步，点击左侧的报表名称，动态构建grid，

 

 

关于easyui的动态列网上介绍也不多，经过多次尝试，找到一个实现思路。

主要在js代码的实现上，首先是动态构建grid的列名，然后触发grid的ajax机制请求后端的数据。

点击左侧列表，返回grid的列名，成功后调用grid的数据展示。

左侧点击事情的js代码：

  function BuildGrid(wId) {
            $.ajax({
                type: "get",
                dataType: "json",
                url: actionUrl,
                data: { action: 'dlistcol', keyWord: wId },
                success: function (data) {
                    grid(wId, [data.columns]);//填充columns，grid自身的ajax机制请求数据
                },
                error: function () {
                    alert("加载数据失败,请重试！");
                }
            });
        }

function grid(wId, col) {
            $('#sqlGrid').datagrid({
                url: actionUrl,
                queryParams: { action: "dlist", keyWord: wId, page: 1, rows: 15 },
                fitColumns: false,
                singleSelect: true,
                striped: true,
                pageNumber: 1,
                pagination: true,
                pageSize: 15,
                loadMsg: '数据加载中请稍后……',
                pageList: [15, 10, 20, 30, 50],
                columns: col
            });
        }

后端返回的列名json

{"columns":[{"title":"编号","field":"IDENTITY"},{"title":"交接表编号","field":"JJBNO"},{"title":"更新时间","field":"MODIFYON"}]}