在easyui中实现datagrid滚动条联动

//竖向滚动条联动
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横向滚动。

最后

以上就是美好火为你收集整理的在easyui中实现datagrid滚动条联动的全部内容，希望文章能够帮你解决在easyui中实现datagrid滚动条联动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。