Jquery DataTable增加多选按钮需要注意的事情

5 篇文章 0 订阅

在修改公司遗留项目时,需要对原先的表格增加多选按钮,并相应的增加全选功能,本以为是一个很简单的需求,可是,在增加多选按钮后,无法获得首行全选按钮的选中状态,无论是否选择,获得的选中状态均为false。
本以为是Jquery的版本问题,获取选中状态的方法不对造成的,更换了prop、attr、is等方法,还是无法获得正确的选中状态,这让一个本来很简单的问题变得毫无头绪。
后来在页面的其它位置添加多选按钮后,使用prop方法可以正确的获得选中状态?!难道是DataTable不能增加多选按钮?查找了网上的许多资料,发现有很多添加多选的方法和代码,也就是说,这个功能是可以实现的,为什么在我这里不行?
经过许多测试后发现,Jquery DataTable中提供了一个功能—固定列,所谓的固定列是在表格列过多,滑动横向滚动轴时,被固定的列不会跟着滑动,就像excel中的“冻结”一样,而实现这个功能本质,就是在表格上再覆盖一层表格,将设置固定的列加载到覆盖层上,这样,滑动的时候,是在滑动底层列表,而上方的列表是不会随着滑动的,看上去就像是固定了一样,也正是这个原因,我本地的项目中对前3列进行了固定,导致了每次页面点击的多选按钮是上层的,而我获取的是底层的按钮选中状态,所以每次获取都是false。

解决方法:
1、去除固定列,如果可以挤一挤,还是不要加固定列,这样就不会有这些问题了
2、如果列很多,必须要使用固定列的时候,获取全选按钮的选中状态一定不能用ID,只能用class或者name来获取,而且获取的时候,得到的控件数量是两个,使用 ( ( ((".class")[ ( " . c l a s s " ) . l e n g t h − 1 ] ) . p r o p ( " c h e c k e d " ) ; 来 获 取 , 因 为 覆 盖 层 是 在 最 后 添 加 进 去 的 ( 按 F 12 可 以 查 看 ) 。 同 样 , 列 表 中 数 据 行 的 多 选 按 钮 也 是 每 行 两 个 , 在 获 取 时 也 是 很 麻 烦 的 , 如 果 多 选 按 钮 在 左 侧 固 定 列 , 可 以 通 过 (".class").length-1]).prop("checked");来获取,因为覆盖层是在最后添加进去的(按F12可以查看)。同样,列表中数据行的多选按钮也是每行两个,在获取时也是很麻烦的,如果多选按钮在左侧固定列,可以通过 (".class").length1]).prop("checked");F12(".DTFC_LeftBodyWrapper .class")来获取覆盖层的多选按钮集合。(以上的class换成你代码中的全选按钮的class和数据行的多选按钮的class即可)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值