您的位置:首页 > 其它

jqgrid 表格插件实现多行表头

2017-06-06 10:08 393 查看
jqgrid
插件默认为2行

修改后可编程多行

修改jquery.jqGrid.src.js文件

if (skip === 0) {
if (o.useColSpanStyle) {
 
// expand the header height to two rows
// $th.attr("rowspan", "2");
//console.log($th);
//console.log($th.parent());

// expand the header height to many rows
var rowspanlen = $th.parent().siblings('tr').length;
//console.log("rowspanlen: " + rowspanlen);
if(rowspanlen == 0){
rowspanlen = 2;
} else {
rowspanlen++;
}
$th.attr("rowspan", rowspanlen);
} else {
$('<th>', {role: "columnheader"})
.addClass("ui-state-default ui-th-column-header ui-th-"+ts.p.direction)
.css({"display": cmi.hidden ? 'none' : '', 'border-top': '0 none'})
.insertBefore($th);
$tr.append(th);
}
} else {


var groupHead = [];
$.each(areaobj,function(i,v){
var sc = {
startColumnName: v.id.trim()+'sampleCount',
numberOfColumns: 6,
titleText: v.planName.trim()
};
groupHead.push(sc);
});
$("#tabGrid").jqGrid('setGroupHeaders', {
useColSpanStyle : true, // 没有表头的列是否与表头列位置的空单元格合并
groupHeaders :  groupHead
});
groupHead = [];
$.each(areaobj,function(i,v){
var sc = {
startColumnName: v.id.trim()+'sampleCount',
numberOfColumns: 6,
titleText: v.projectName.trim()
};
groupHead.push(sc);
});
$("#tabGrid").jqGrid('setGroupHeaders', {
useColSpanStyle : true, // 没有表头的列是否与表头列位置的空单元格合并
groupHeaders :  groupHead
});

groupHead = [];
$.each(areaobj,function(i,v){
var sc = {
startColumnName: v.id.trim()+'sampleCount',
numberOfColumns: 6,
titleText: v.footTypeName.trim()
};
groupHead.push(sc);
});
$("#tabGrid").jqGrid('setGroupHeaders', {
useColSpanStyle : true, // 没有表头的列是否与表头列位置的空单元格合并
groupHeaders :  groupHead
});


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jqgrid 表头多行