我们有一个数据表格,如图所示。其中有3列是冻结的,其余可以滚动。如图所示,冻结列的对齐有误。如果移除冻结列属性,表格看起来就正常了。有什么建议来解决这个问题吗?
我曾经遇到过类似的问题,数据表格冻结并且在不同的帖子中使用许多不同的脚本。通过使用下面的脚本,所有浏览器都能正常工作,并且不需要设置高度,它会自动计算。另外,它还会触发浏览器事件,以便正确地调整表格大小。
synchronizeRowsHeight : function() {
var $leftRows = $('.ui-datatable-frozenlayout-left').find('tr');
var $rightRows = $('.ui-datatable-frozenlayout-right').find('tr');
$leftRows.each(function(index) {
var $leftRow = $(this);
var $leftHeight = $leftRow.innerHeight();
var $rightRow = $rightRows.eq(index);
var $rightHeight = $rightRow.innerHeight();
if ($rightHeight > $leftHeight) {
$leftRow.innerHeight($rightHeight);
var diff = $rightHeight - $leftRow.innerHeight();
if (diff != 0)
$leftRow.innerHeight($rightHeight + diff);
} else if ($rightHeight < $leftHeight) {
$rightRow.innerHeight($leftHeight);
var diff = $leftHeight - $rightRow.innerHeight();
if (diff != 0)
$rightRow.innerHeight($leftHeight + diff);
}
})
// fire a resize event to tell the table to repaint
$(window).trigger('resize');
}
冻结的数据表格有两个部分,左侧(固定)和右侧(动态/可滚动)。
<script type='text/javascript'>
function synchronizeRowsHeight() {
//aligning table header row
var $leftHeaderRow = $('.ui-datatable-frozenlayout-left .ui-datatable-scrollable-header-box tr');
var $rightHeaderRow = $('.ui-datatable-frozenlayout-right .ui-datatable-scrollable-header-box tr');
$leftHeaderRow.outerHeight(35);//height(px) in int
$rightHeaderRow.outerHeight(35);//height(px) in int
//aligning table data rows
var $leftRows = $('.ui-datatable-frozenlayout-left .ui-datatable-scrollable-body tr');
var $rightRows = $('.ui-datatable-frozenlayout-right .ui-datatable-scrollable-body tr');
$leftRows.each(function (index) {
var $leftRow = $leftRows.eq(index);
var $rightRow = $rightRows.eq(index);
$rightRow.innerHeight($leftRow.innerHeight());
$leftRow.innerHeight($rightRow.innerHeight());
});
}
</script>
从您的bean中调用上述JavaScript函数,如下所示:
RequestContext.getCurrentInstance().execute("synchronizeRowsHeight();");
我们在类似的使用情况下遇到了同样的问题。 据我所知,目前没有很好的解决方案。
最简单的方法是,在每次datatable重绘时(包括排序等ajax事件),调整较小的tr和th的高度。
另一种可能的方法是通过防止行断裂来避免不同的高度。