公司项目需要实现表格左侧两列锁定,研究了一下,发现不难。
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,但因为项目中该数据是直接从后台获取的,开始我还设想着靠自己添加这个属性,但一直不得其解,没找到方法。最后尝试着跟开发沟通了下,才发现从后端添加特别简单。这也是给自己的一个教训,多沟通,多请教,不要一味沉浸在自己的世界。