在修改公司遗留项目时,需要对原先的表格增加多选按钮,并相应的增加全选功能,本以为是一个很简单的需求,可是,在增加多选按钮后,无法获得首行全选按钮的选中状态,无论是否选择,获得的选中状态均为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").length−1]).prop("checked");来获取,因为覆盖层是在最后添加进去的(按F12可以查看)。同样,列表中数据行的多选按钮也是每行两个,在获取时也是很麻烦的,如果多选按钮在左侧固定列,可以通过(".DTFC_LeftBodyWrapper .class")来获取覆盖层的多选按钮集合。(以上的class换成你代码中的全选按钮的class和数据行的多选按钮的class即可)