JQuery Easy Ui dataGrid 数据表格
最近开发中用到了固定双向表头的效果，在网上找了插件dataGrid，遇到的问题记录一下：
1 .datagrid读取JS本地拼接组合的JSON对象：
一般使用datagrid时要在URL中指定一个json文件，或者请求一个服务器端动态生成的json程序，其实它也同样可以读取JS本地拼接组合的JSON对象。
读取本地数据，利用了属性：loadData（载入本地数据），实例：
(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({ 507, height: 288, frozenColumns: [ [ { field: 'nm', title: '姓名', 80, align: 'center', rowspan: 2 }, { title: '总分', 80, align: 'center' } ], [ { field: 'total_point', title: '(100)', align: 'center' } ] ], columns: [ [ { title: '1', 80, align: 'center' }, { title: '2', 80, align: 'center' }, { title: '3', 80, align: 'center' }, { title: '4', 80, align: 'center' }, { title: '5', 80, align: 'center' }, { title: '6', 80, align: 'center' }, { title: '7', 80, align: 'center' }, { title: '8', 80, align: 'center' }, { title: '9', 80, align: 'center' }, { title: '10', 80, align: 'center' }, { title: '11', 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', 507, height: 288, frozenColumns: [ [ { field: 'nm', title: '姓名', 80, align: 'center', rowspan: 2 }, { title: '总分', 80, align: 'center' } ], [ { field: 'total_point', title: '(100)', align: 'center' } ] ], columns: [ [ { title: '1', 80, align: 'center' }, { title: '2', 80, align: 'center' }, { title: '3', 80, align: 'center' }, { title: '4', 80, align: 'center' }, { title: '5', 80, align: 'center' }, { title: '6', 80, align: 'center' }, { title: '7', 80, align: 'center' }, { title: '8', 80, align: 'center' }, { title: '9', 80, align: 'center' }, { title: '10', 80, align: 'center' }, { title: '11', 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', 507, height: 288, frozenColumns: [ [ { field: 'nm', title: '姓名', 80, align: 'center', rowspan: 2 }, { title: '总分', 80, align: 'center' } ], [ { field: 'total_point', title: '(100)', align: 'center' } ] ], columns: [ [ { title: '1', 80, align: 'center' }, { title: '2', 80, align: 'center' }, { title: '3', 80, align: 'center' }, { title: '4', 80, align: 'center' }, { title: '5', 80, align: 'center' }, { title: '6', 80, align: 'center' }, { title: '7', 80, align: 'center' }, { title: '8', 80, align: 'center' }, { title: '9', 80, align: 'center' }, { title: '10', 80, align: 'center' }, { title: '11', 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