使用 jqGrid 渲染表格,手动拖拽冻结列,调整该列的列宽后,导致了后一列内容的左端被隐藏了部分内容。
经过排查,发现这个情况只在冻结列调整列宽时出现,并且由于 jqGrid 不支持初始化后调整列宽,使用了以下 hack 方法:
jQuery('#grid-table').jqGrid({
datatype: 'local',
shrinkToFit: false,
autoScroll: true,
height: 'auto',
autowidth: true,
colNames: [
'名称',
// 此处留空
'',
'日期',
],
colModel: [
{
name: 'name',
index: 'name',
width: 140,
editable: false,
sortable: false,
frozen: true
}, {
// 此列用于hack修复冻结列拖拽后列宽错误的问题
name: 'block',
index: 'block',
width: 1,
fixed: true,
hidedlg: true,
hidden: true,
}, {
name: 'date',
index: 'date',
width: 120,
editable: false,
sortable: false,
],
// ...
resizeStart: function() {
jQuery("#grid-table").setGridParam().showCol("block");
},
即,在冻结列后加入一个隐藏的空白列,然后调整宽度事件触发之前,用 resizeStart 执行,显示该空白列。调整宽度事件结束后,该空白列刚好被隐藏,此时正常内容就能完整显示了。