jqGrid锁定列实现及高度不一致解决

公司项目需要实现表格左侧两列锁定,研究了一下,发现不难。

jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'name', index: 'name', width: 70, frozen:true },
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70, frozen:true},
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
}).jqGrid('setFrozenColumns');

两处:colmodel中锁定列添加属性frozen:true,最后添加一句jqGrid(‘setFrozenColumns’);

高度不一致问题:
锁定后,发现锁定列比右侧滚动列略向下,体验非常不好,官方文档中并没有相应的解决方法,找到一篇博客,其采取hack方法,和自己的实际问题结合了一下,最后解决了。
主要思路:

var listId = 'list1';
var divTop = -1;
var bdivTop = -1;
$('#gview_' + gridId + ' .frozen-div').css({
    top: $('#gview_' + gridId + ' .frozen-div').position().top + divTop
});
$('#gview_' + gridId + ' .frozen-bdiv').css({
    top: $('#gview_' + gridId + ' .frozen-bdiv').position().top + bdivTop
});

我直接给top设置了具体值。

总结一点工作方法吧:
如上,实现锁定列需要给colModel中添加属性frozen:true,但因为项目中该数据是直接从后台获取的,开始我还设想着靠自己添加这个属性,但一直不得其解,没找到方法。最后尝试着跟开发沟通了下,才发现从后端添加特别简单。这也是给自己的一个教训,多沟通,多请教,不要一味沉浸在自己的世界。

你可能感兴趣的:(CSS)