在easyui中实现datagrid滚动条联动

75 阅读 0 评论 50 点赞

我是靠谱客的博主美好火，这篇文章主要介绍在easyui中实现datagrid滚动条联动，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12

//竖向滚动条联动
var contents = $('#importform div.datagrid-body');
contents.scroll(function () {
contents.not(this).prop({ scrollLeft: this.scrollLeft, scrollTop: this.scrollTop });
});
//横向滚动条联动
var contents2 = $('#importform div.datagrid-view2 div.datagrid-header');
contents2.scroll(function () {
$('#importform div.datagrid-view2 div.datagrid-body').prop({ scrollLeft: this.scrollLeft, scrollTop: this.scrollTop });
contents2.not(this).prop({ scrollLeft: this.scrollLeft, scrollTop: this.scrollTop });
});

说明：
1、importform是所有datagrid所在的表单的ID。

2、纵向联动通过监听datagrid-body实现的滚动实现，但是在测试的过程中，发现横向滚动无法触发该事件。

分析页面的html结构，发现easyui的datagrid生成的横向滚动并不是在datagrid-body这个层级上，而是在datagrid-viewX这个层级上，注意X的，这个地方可能是datagrid-view或者datagrid-view2，这取决于你是否启用了固定列（frozenColumns）。

3、通过在datagrid-view2上面绑定滚动监听事件，并没能实现联动的需求。后尝试在datagrid-view2下面的datagrid-header(标题行的滚动)上进行监听，然后通过datagrid-header的滚动来联动datagrid-body横向滚动。