jqGrid列标题合并，一行显示，（三列共用同一列名称）

最新推荐文章于 2019-11-11 22:06:10 发布

原创最新推荐文章于 2019-11-11 22:06:10 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #列标题合并

jqGrid 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在jqGrid中实现列标题的合并，通过设置cmTemplate和调整列宽，达到一行显示三个列共用同一名称的效果。主要涉及到的关键代码包括设置resizable和sortable属性为false，以及调整列的宽度来隐藏第二、三列的标题。

关键设定：

cmTemplate: {
resizable:false,
sortable: false
},

gridComplete: function() {

var $grid = $("#ID");

// 第一列的宽度 = 三列宽度总和

var newWidth = $("#kijituMeisaiGrid_startTimeH").width() +
$("#kijituMeisaiGrid_semiMarkStart").outerWidth(true) +
$("#kijituMeisaiGrid_startTimeM").outerWidth(true);
$grid.jqGrid("setLabel", "startTimeH", lblColStartTime, "", {
style: "width: " + newWidth + "px;",
colspan: "3"

});

// 第二，三列标题隐藏

$grid.jqGrid("setLabel", "semiMarkStart", "", "", {style: "display: none"});
$grid.jqGrid("setLabel", "startTimeM", "", "", {style: "display: none"});
newWidth = $("#kijituMeisaiGrid_endTimeH").width() +
$("#kijituMeisaiGrid_semiMarkEnd").outerWidth(true) +
$("#kijituMeisaiGrid_endTimeM").outerWidth(true);
$grid.jqGrid("setLabel", "endTimeH", lblColEndTime, "", {
style: "width: " + newWidth + "px;",
colspan: "3"
});
$grid.jqGrid("setLabel", "semiMarkEnd", "", "", {style: "display: none"});
$grid.jqGrid("setLabel", "endTimeM", "", "", {style: "display: none"});
}