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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值