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中，這樣就可以動態設定列了。