bootstrap-table表格实现拖拽鼠标快速选行

    上周客户反馈友商系统页面中的表格可以通过按下鼠标左键然后移动鼠标,来快速选择表格复选框,希望我们系统把这个功能也加上。

    目前我们系统内的表格都是用的bootstrap-table组件(https://bootstrap-table.com)来实现的。先在baidu、bing海外都搜索了一下,没有发现类似的案例参考。然后又研究了一下官网的手册,想从bootstrap-table的标准事件里入手,发现bootstrap-table对这类的事件是没有封装定义的。

    最后是通过修改bootstrap-table源码实现了这个功能。思路如下:

1. 注册mousedown事件,鼠标左键按下时,记录mousedown状态为true。

2. 注册mouseup事件,鼠标左键弹起时,记录mousedown为false。

3. 注册mousemove事件,鼠标移动时,如果mousedown状态为true,则获取当前行的选中状态。若当前行未选中,则将此行设置选中。

此功能的最终效果如下

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值