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