easyui datagrid 动态生成列

最近使用easyui 来最为前段框架，以前使用的是extjs，不使用它的主要原因是extjs过于庞大，不适合小型项目使用。

datagrid是比较常用的一个控件，并且有的时候我们需要并不知道一个table的列数是多少，甚至不知道每列的数据有哪些，这个时候就要动态生成列了，

使用easyui中的datagrid动态生成列还是比较容易的，下面开始代码：

前段代码：

<span style="font-size:14px;"> <table id="dataSnapTable" class="easyui-datagrid" style="width:100%;"
data-options="rownumbers:true,singleSelect:true,fit:true" pagination="true">
</table></span>

这里没有多余的其他内容，主要就是为了说明一下动态列，

从后台获取数据可以使用ajax，websocket等等，也没有什么好说的主要是前端的js文件处理的内容：

js代码：

<span style="font-size:14px;">   var names = data.names;
var columns = new Array();
var column = {};
column["title"] = '时间';
column["field"] = 'TM';
column["width"] = 150;
column["formatter"] = formatTime;
columns.push(column);
$.each(names, function (i, name) {
var column = {};
column["title"] = name;
column["field"] = name;
column["width"] = 120;
column["formatter"] = formatAV;
columns.push(column);
});
var json = $.parseJSON(data.value);
$('#dataSnapTable').datagrid({
columns: [
columns
]
}).datagrid('loadData', json);</span>

主要是先构造列，然后将列内容设置到对应datagrid中，这样就可以动态设置列了。