### 实现
EasyUI数据表格中
复选框全选功能
要在
EasyUI的数据表格（`datagrid`）中实现
复选框的全选功能，可以通过监听表头
复选框的状态变化并动态设置每一行的选择状态来完成。以下是具体的实现方式：
#### HTML结构
首先，在页面上创建一个带有
复选框列的`datagrid`组件。
```html
<table id="dg" class="
easyui-datagrid" style="width:700px;height:auto"
data-options="
url:'data.
json',
method:'get',
singleSelect:false,
rownumbers:true,
pagination:true,
toolbar:'#toolbar'
">
<thead>
<tr>
<th field="ck" checkbox="true"></th> <!--
复选框 -->
<th field="name" width="100">名称</th>
<th field="age" width="80">年龄</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="
easyui-linkbutton" iconCls="icon-ok" onclick="selectAll()">全选/取消全选</a>
</div>
```
#### JavaScript逻辑
通过编写JavaScript代码控制全选行为。具体来说，可以绑定点击事件到按钮或者表头
复选框，并更新所有行的
选中状态。
```javascript
function selectAll() {
var dg = $('#dg'); // 获取datagrid实例
var rows = dg.datagrid('getRows'); // 获取当前页的所有行
if (rows.length === dg.datagrid('getSelections').length) { // 如果已全部
选中，则清空选择
dg.datagrid('clearSelections');
} else { // 否则逐行
选中
for (var i = 0; i < rows.length; i++) {
dg.datagrid('selectRow', i);
}
}
}
// 初始化时绑定表头
复选框的变化事件
$('#dg').datagrid({
onLoadSuccess: function () {
var headerCheckbox = $('input[type=checkbox][name=fixedhead]', this); // 查找表头
复选框
headerCheckbox.on('click', function () {
if ($(this).is(':checked')) { // 判断是否被
选中
$('#dg').datagrid('checkAll'); // 调用API全选
} else {
$('#dg').datagrid('uncheckAll'); // 取消全选
}
});
},
onCheckAll: function(rows){
console.log('所有行已被
选中:', rows); // 打印日志[^2]
},
onUncheckAll: function(){
console.log('所有行已被取消
选中'); // 打印日志
}
});
```
上述代码实现了以下功能：
- 当用户点击“全选/取消全选”按钮时，会判断当前是否有任何未
选中的行；如果有，则执行全选操作；如果已经全选，则清除所有选择。
- 绑定了表头
复选框的点击事件，用于同步整个表格的
选中状态。
#### 关键点说明
1. **`singleSelect=false`**
需要确保`datagrid`的`singleSelect`属性设为`false`，以便支持多选模式[^1]。
2. **`onLoadSuccess`回调**
使用此回调初始化表头
复选框的行为，因为只有在数据加载完成后才能正确获取DOM节点[^3]。
3. **`checkAll` 和 `uncheckAll` 方法**
这些是`datagrid`内置的方法，分别用来快速
选中或取消
选中所有的行[^5]。
---
###
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
