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中，这样就可以动态设置列了。