在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横向滚动。

猜你喜欢

转载自blog.csdn.net/yang_lover/article/details/51996174