JQuery Easy Ui dataGrid 数据表格

最近开发中用到了固定双向表头的效果，在网上找了插件dataGrid，遇到的问题记录一下：

1 .datagrid读取JS本地拼接组合的JSON对象：

一般使用datagrid时要在URL中指定一个json文件，或者请求一个服务器端动态生成的json程序，其实它也同样可以读取JS本地拼接组合的JSON对象。

读取本地数据，利用了属性：loadData（载入本地数据），实例：

<!--<span><span class="string">html代码</span></span>-->
<table id="tt1"></table>

(function () {
   var str = '{"rows": [{ "nm": "rr", "total_point": 89, "point_01": 13, "point_02": 13, "point_03": 13, "point_04": 13, "point_05": 13, "point_06": 13, "point_07": 13, "point_08": 13, "point_09": 13, "point_10": 13, "point_11": 13 },{ "nm": "ss", "total_point": 24, "point_01": 13, "point_02": 13, "point_03": 13, "point_04": 13, "point_05": 13, "point_06": 13, "point_07": 13, "point_08": 13, "point_09": 13, "point_10": 13, "point_11": 13 }]}';
       str = eval("(" + str + ")");
       $('#tt1').datagrid({
            width: 507,
            height: 288,
            frozenColumns: [
                             [
                                { field: 'nm', title: '姓名', width: 80, align: 'center', rowspan: 2 },
                                { title: '总分', width: 80, align: 'center' }
                             ],
                            [
                               { field: 'total_point', title: '(100)', align: 'center' }
                            ]
                          ],
           columns: [
                      [
                       { title: '1', width: 80, align: 'center' },
                       { title: '2', width: 80, align: 'center' },
                       { title: '3', width: 80, align: 'center' },
                       { title: '4', width: 80, align: 'center' },
                       { title: '5', width: 80, align: 'center' },
                       { title: '6', width: 80, align: 'center' },
                       { title: '7', width: 80, align: 'center' },
                       { title: '8', width: 80, align: 'center' },
                       { title: '9', width: 80, align: 'center' },
                       { title: '10', width: 80, align: 'center' },
                       { title: '11', width: 80, align: 'center' }
                      ],
                      [
                        { field: 'point_01', title: '(13.5)', align: 'center' },
                        { field: 'point_02', title: '(13.5)', align: 'center' },
                        { field: 'point_03', title: '(13.5)', align: 'center' },
                        { field: 'point_04', title: '(13.5)', align: 'center' },
                        { field: 'point_05', title: '(13.5)', align: 'center' },
                        { field: 'point_06', title: '(13.5)', align: 'center' },
                        { field: 'point_07', title: '(13.5)', align: 'center' },
                        { field: 'point_08', title: '(13.5)', align: 'center' },
                        { field: 'point_09', title: '(13.5)', align: 'center' },
                        { field: 'point_10', title: '(13.5)', align: 'center' },
                        { field: 'point_11', title: '(13.5)', align: 'center' }
                      ]
                   ]
                 });
                 $('#tt1').datagrid("loadData",obj01)
      })();

   

若是请求URL中指定一个json文件，或者请求一个服务器端动态生成的json程序:

(function () {
                            $('#tt1').datagrid({
                                url: 'datagrid_data02.json',
                                width: 507,
                                height: 288,
                                frozenColumns: [
                                                    [
                                                        { field: 'nm', title: '姓名', width: 80, align: 'center', rowspan: 2 },
                                                        { title: '总分', width: 80, align: 'center' }
                                                    ],
                                                    [
                                                        { field: 'total_point', title: '(100)', align: 'center' }
                                                    ]
                                ],
                                columns: [
                                            [
                                                { title: '1', width: 80, align: 'center' },
                                                { title: '2', width: 80, align: 'center' },
                                                { title: '3', width: 80, align: 'center' },
                                                { title: '4', width: 80, align: 'center' },
                                                { title: '5', width: 80, align: 'center' },
                                                { title: '6', width: 80, align: 'center' },
                                                { title: '7', width: 80, align: 'center' },
                                                { title: '8', width: 80, align: 'center' },
                                                { title: '9', width: 80, align: 'center' },
                                                { title: '10', width: 80, align: 'center' },
                                                { title: '11', width: 80, align: 'center' }
                                            ],
                                            [
                                                { field: 'point_01', title: '(13.5)', align: 'center' },
                                                { field: 'point_02', title: '(13.5)', align: 'center' },
                                                { field: 'point_03', title: '(13.5)', align: 'center' },
                                                { field: 'point_04', title: '(13.5)', align: 'center' },
                                                { field: 'point_05', title: '(13.5)', align: 'center' },
                                                { field: 'point_06', title: '(13.5)', align: 'center' },
                                                { field: 'point_07', title: '(13.5)', align: 'center' },
                                                { field: 'point_08', title: '(13.5)', align: 'center' },
                                                { field: 'point_09', title: '(13.5)', align: 'center' },
                                                { field: 'point_10', title: '(13.5)', align: 'center' },
                                                { field: 'point_11', title: '(13.5)', align: 'center' }
                                            ]
                                ]
                            });
                        })();<pre name="code" class="html">$('#tt1').datagrid({
                                url: 'datagrid_data02.json',
                                width: 507,
                                height: 288,
                                frozenColumns: [
                                                    [
                                                        { field: 'nm', title: '姓名', width: 80, align: 'center', rowspan: 2 },
                                                        { title: '总分', width: 80, align: 'center' }
                                                    ],
                                                    [
                                                        { field: 'total_point', title: '(100)', align: 'center' }
                                                    ]
                                ],
                                columns: [
                                            [
                                                { title: '1', width: 80, align: 'center' },
                                                { title: '2', width: 80, align: 'center' },
                                                { title: '3', width: 80, align: 'center' },
                                                { title: '4', width: 80, align: 'center' },
                                                { title: '5', width: 80, align: 'center' },
                                                { title: '6', width: 80, align: 'center' },
                                                { title: '7', width: 80, align: 'center' },
                                                { title: '8', width: 80, align: 'center' },
                                                { title: '9', width: 80, align: 'center' },
                                                { title: '10', width: 80, align: 'center' },
                                                { title: '11', width: 80, align: 'center' }
                                            ],
                                            [
                                                { field: 'point_01', title: '(13.5)', align: 'center' },
                                                { field: 'point_02', title: '(13.5)', align: 'center' },
                                                { field: 'point_03', title: '(13.5)', align: 'center' },
                                                { field: 'point_04', title: '(13.5)', align: 'center' },
                                                { field: 'point_05', title: '(13.5)', align: 'center' },
                                                { field: 'point_06', title: '(13.5)', align: 'center' },
                                                { field: 'point_07', title: '(13.5)', align: 'center' },
                                                { field: 'point_08', title: '(13.5)', align: 'center' },
                                                { field: 'point_09', title: '(13.5)', align: 'center' },
                                                { field: 'point_10', title: '(13.5)', align: 'center' },
                                                { field: 'point_11', title: '(13.5)', align: 'center' }
                                            ]
                                ]
                            });
                        })();

下面是网上介绍的一些详细参数：http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events