我正在使用 jquery ui tabs 在同一个div中并排显示两个网格。使用 jquery datatables 插件显示网格。
最近我在我的两个网格中添加了固定列的功能,这使得IE 9随机地表现得非常奇怪。
此行为发生在完全随机但在两个网格中的一个不在两者上。 IE 9在水平滚动条上显示固定列部分。它看起来如下:
其他网格显示就好如下:
有趣的是,如果您整理受影响的表格或在搜索文本框中输入一些字符,则此重叠部分会自动修复。
我搜索它并且知道在这些操作上调用了 draw()函数,因此我尝试在选项卡选择事件上手动调用此函数,但没有& #39;解决问题。
以下是选项卡选择事件的JS代码:
$('#divEAMountDismountGridsTabs, #CurrentSpec').tabs(
{
select: function(event, ui)
{
// Do stuff here
var tempDismount = $('#tblDismountAtt').DataTable();
tempDismount.draw(false);
var tempCurrentSpec = $('#tblCurrentSpec1').DataTable();
tempCurrentSpec.draw(false);
}
});
下面是我在数据表初始化上写的JS(两个网格都有相同的属性,所以我只是复制第一个网格的初始化)。
/*DataTable Implementation*/
var tableDismountAtt = $('#tblDismountAtt').dataTable(
{
"bFilter": true,
"bInfo": false,
"bDestroy": true,
"bwidth": '100%',
//"sDom": '<"top"f>',
'iDisplayLength':5000,
"order": [[2, "asc"]],
dom: "Cfrtip",
scrollY: "140px",
scrollX: "100%",
paging: false,
scrollCollapse: true,
"aoColumnDefs" : [
{'bSortable' : false, 'aTargets' : [ 0 ] , "width": "80px"}, //Switch to Dismount
{'bSortable' : false, 'aTargets' : [ 1 ], "width": "80px"}, //Parts Status
{'bSortable' : true, 'aTargets' : [ 2 ], "width": "80px"}, //Sales Code
{'bSortable' : true, 'aTargets' : [ 3 ] , "width": "60px"}, //Price
{'bSortable' : false, 'aTargets' : [ 4 ], "width": "60px"}, //Currency
{'bSortable' : true, 'aTargets' : [ 5 ], "width": "150px"}, //Sales Code Description
{'bSortable' : false, 'aTargets' : [ 6 ], "width": "80px"}, //Quantity
{'bSortable' : false, 'aTargets' : [ 7 ], "width": "380px"}, //Remarks
{'bSortable' : true, 'aTargets' : [ 8 ], "width": "80px"}, // PSO Ref No.
{'bSortable' : false, 'aTargets' : [ 9 ], "width": "150px"}, //Model Sub Name
{'bSortable' : false, 'aTargets' : [ 10 ] , "width": "80px"}, //Value
{'bSortable' : false, 'aTargets' : [ 11 ], "width": "150px"}, //Date
{'bSortable' : true, 'aTargets' : [ 12 ]},
{'bSortable' : true, 'aTargets' : [ 13 ]},
{'bSortable' : true, 'aTargets' : [ 14 ]}
]
});
/*Freezing Dismount Attachment Columns*/
new $.fn.dataTable.FixedColumns( tableDismountAtt, {leftColumns: 6, heightMatch: 'auto'});