easyui datagrid 列分組和行歸組
阿新 • • 發佈:2019-02-01
資料格式:
{
"col": [
"分類",
"id",
"模式英文名",
"模式中文名",
"教務系統",
"Oracletest",
"收費系統",
"SqlServer test",
"門戶系統"
],
"db": [
{
"收費系統": "U",
"sqlserver test": "U",
"門戶系統": "U",
"id ": "c7e60fcb5c24442bbd44872e57a8d0ee",
"分類": "在校生",
"模式英文名": "T_DB_XSJBXXL",
"oracletest": "U",
"教務系統": "C",
"模式中文名": "學生基本資訊類"
},
{
"收費系統": "C",
"sqlserver test": "U",
"門戶系統": null,
"id ": "103e3041c7e64d47a08112e46b900045",
"分類": "組織機構",
"模式英文名": "T_DB_MYSQLTEST",
"oracletest": "U",
"教務系統": null,
"模式中文名": "mysql測試"
},
{
"收費系統": "C",
"sqlserver test": "U",
"門戶系統": null,
"id ": "24cfc969c68d462280296c278afe3ad1",
"分類": "組織機構",
"模式英文名": "T_DB_ORACLETEST",
"oracletest": null,
"教務系統": null,
"模式中文名": "oracle測試"
},
{
"收費系統": "U",
"sqlserver test": "U",
"門戶系統": null,
"id": "09cf452922de42a08183e7182a81caa2",
"分類": "組織機構",
"模式英文名": "T_DB_YXZYNJBJ",
"oracletest": "U",
"教務系統": "C",
"模式中文名": "院系專業設定"
}
]
}
col是列,db是資料
js程式碼:
function getDbSet() {
$.post('/DataCenter/DBC/UcData', function (data) {
var col = data.col;
var ds = data.db;
var columns = [[
{ title: '資料集', colspan: 3 },
{ title: '業務系統', colspan: col.length - 4 }],
[]];
columns[1][0] = { field: '分類', title: '分類', align: 'center' };
columns[1][1] = { field: '模式英文名', title: '模式英文名' };
columns[1][2] = { field: '模式中文名', title: '模式中文名' };
col.splice($.inArray('分類', col), 1);
col.splice($.inArray('模式英文名', col), 1);
col.splice($.inArray('模式中文名', col), 1);
var index = 3;
for (i = 0; i < col.length; i++) {
if (col[i] != "id") {
var colname = col[i].toLowerCase();
columns[1][index] = {
field: colname, title: colname, formatter: function (value, row, index) {
var str = value;
if (value == 'C' || value == 'U') {
str = "<div style='text-align:center'>" + value + "</div>";
}
return str;
},
styler: function (value, row, index) {
return 'background-color:#E5EDD3;';
}
};
index++;
}
}
tab_uc.datagrid({
data: ds,
idField: 'id',
rownumbers: true,
columns: columns,
onLoadSuccess: function (data) {
var merges = [];
var tmpClass = '';
var index = 0;
var rowspan = 0;
for (i = 0; i < ds.length; i++) {
if (tmpClass == '') {
tmpClass = ds[i].分類;
index = i;
} else {
rowspan++;
}
if (tmpClass != ds[i].分類 || i == ds.length - 1) {
merges.push({ index: index, rowspan: rowspan });
tmpClass = ds[i].分類;
index = i;
rowspan = 1;
}
}
console.log(merges);
for (var i = 0; i < merges.length; i++) {
tab_uc.datagrid('mergeCells', {
index: merges[i].index,
field: '分類',
rowspan: merges[i].rowspan
});
}
}
})
});
}