1：表头固定（前台写）
参照官方：http://www.jeasyui.net/demo/334.html
效果图：
源代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Column Group - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <h2>Column Group</h2> <p>The header cells can be merged. Useful to group columns under a category.</p> <div style="margin:20px 0;"></div> <table class="easyui-datagrid" title="Column Group" style="width:700px;height:250px" data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'"> <thead> <tr> <th data-options="field:'itemid',width:80" rowspan="2">Item ID</th> <th data-options="field:'productid',width:100" rowspan="2">Product</th> <th colspan="4">Item Details</th> </tr> <tr> <th data-options="field:'listprice',width:80,align:'right'">List Price</th> <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',width:240">Attribute</th> <th data-options="field:'status',width:60,align:'center'">Status</th> </tr> </thead> </table> </body> </html>
2：后台构造JSON格式，前台加载
格式如下：
{"total":2,"columns":[[{"title":"一组","colspan":3},{"field":"opt","title":"Operation","rowspan":2},{"title":"二组","colspan":3}],[{"field":"name","title":"name"},{"field":"addr","title":"Address"},{"field":"col4","title":"Col41"},{"field":"name1","title":"name1"},{"field":"addr1","title":"Address1"},{"field":"col41","title":"col411"}]],"rows":[{"opt":"Delete","name":"zhangxu","addr":"Add3","col4":"ceshi","name1":"mingyue","addr1":"ceshi1","col41":"mingyue1"},{"opt":"Add","name":"zhanglianhua","addr":"haixin","col4":"kldjalk","name1":"zhanglianhua1","addr1":"haixin1","col41":"jdfalkja1"}]}
前台加载代码：
function InitDgView() {
//var jsondata = { "total": 2, "columns": [[{ "title": "一组", "colspan": 3 }, { "field": "opt", "title": "Operation", "rowspan": 2 }, { "title": "二组", "colspan": 3 }], [{ "field": "name", "title": "name" }, { "field": "addr", "title": "Address" }, { "field": "col4", "title": "Col41" }, { "field": "name1", "title": "name1" }, { "field": "addr1", "title": "Address1" }, { "field": "col41", "title": "col411" }]], "rows": [{ "opt": "Delete", "name": "zhangxu", "addr": "Add3", "col4": "ceshi", "name1": "mingyue", "addr1": "ceshi1", "col41": "mingyue1" }, { "opt": "Add", "name": "zhanglianhua", "addr": "haixin", "col4": "kldjalk", "name1": "zhanglianhua1", "addr1": "haixin1", "col41": "jdfalkja1" }] };
var jsondata;
$.get("/Pbfx/Hbfb/GetPbfxData", function (data) {
//jsondata = JSON.parse(data.replace(/'/g, '"')); //标准JSON格式为双引号，单引号无法转换
jsondata = JSON.parse(data);
$('#dgView').datagrid({
title: ' XXXXXXXXX',
singleSelect: true,
fit: true,
url: '',
columns: jsondata.columns,
rownumbers: true
}).datagrid('loadData', jsondata.rows);
});
}
