jqGrid表格 冻结列调整列宽后导致后一列左端被隐藏部分内容的问题

使用 jqGrid 渲染表格,手动拖拽冻结列,调整该列的列宽后,导致了后一列内容的左端被隐藏了部分内容。

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 执行,显示该空白列。调整宽度事件结束后,该空白列刚好被隐藏,此时正常内容就能完整显示了。

上一篇:jqgrid 实战


下一篇:jqGrid表头与数据不对齐的问题