【easyui datagrid】表格头部每列加checkbox实现按列全选功能

“众所周知”easyui-datagrid表头的checkbox适用于全选整个表格（在每行的第一列都有一个checkbox，用于标记行选中）

但是现在的需求是：头部每列都要有一个checkbox，由于同时实现对应一列的选中和取消~

实现效果：

看上去貌似是简单的~ 但是遇到了easyui里的头部checkbox绑定事件干扰，因此费了翻功夫解决，以下是实现方案、出现的bug及填坑hack手段全过程记录。

step1 （表头对应列添加checkbox）：

在定义表格的column时title加上checkbox

这样初始化表格时表头的每一列都会有一个checkbox~

step2（checkbox状态监控）：

初始化头部checkbox的状态，表格的onLoadSuccess中遍历rows数据，统计是符合列全选规则，即某列所有数据均为选中状态对应值，符合则将对应表头的checkbox的checked属性改成true~

之后就是监控表头checkbox的change，选中时将表格中对应所有列数据改为选中状态，取消时将表格中对应所有列数据改为非选中状态

还有内部checkbox的change，统计一下表格中对应所有列是否都被选中了，如果是则将头部该列状态改为选中，若不是则取消头部该列的选中状态

注意：用prop改变状态不触发change

至此好像搞定了！？

但是这里出现一个奇怪的bug：点击头部某一个checkbox时如果是选中，表头所有的checkbox都会跟着被选中，如果是取消选中则正常……

结果发现人家easyui的表头checkbox定义是用来全选表格所有行的，默认只有一个！所以人家直接把选中事件绑在了表头的checkbox元素上（没有用任何id、name、class限制）

hack：

建立一个数组储存表头应有的状态，在easyui的选中事件干扰后重新对头部的checkbox赋值

修改完成。实现了表头checkbox控制表格列的全选，同时收表格内部checkbox状态变化影响的功能~