动态构建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"}]}