上周客户反馈友商系统页面中的表格可以通过按下鼠标左键然后移动鼠标,来快速选择表格复选框,希望我们系统把这个功能也加上。
目前我们系统内的表格都是用的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,则获取当前行的选中状态。若当前行未选中,则将此行设置选中。
此功能的最终效果如下