datagrid 点击行后checkbox选中状态

本文介绍了一种在Datagrid中实现有条件地选中特定行的方法。通过onClickRow事件监听,仅当某一行的数据满足特定条件时,才允许用户选中该行。

在项目中使用datagrid时遇到一个问题,如果查询的结果满足条件,才可以点击行选中选择框,于是用到了如下一个方法:

 onClickRow: function (index, row) {
				    if(!row["xzzt"]){//判断该行是否满足条件
                        $("input:checkbox[name='ck']").attr("checked", true);
					}
                }

 

在 EasyUI 的 `datagrid` 中让 `checkbox` 为选中状态有不同的场景和写法。 #### 列的 `checkbox` 设置及数据中默认选中 如果要在列中设置 `checkbox`,并让数据中的对应项默认选中,可按如下设置列: ```javascript { field: 'status', title: 'Status', width: 50, align: 'center', editor: { type: 'checkbox', options: { on: "true", off: "false" } } } ``` 示例数据如下,其中 `status` 为 `true` 时 `checkbox` 会默认选中: ```javascript { "total": 28, "rows": [ { "productid": "FI-SW-01", "unitcost": 10.00, "status": true, "listprice": 16.50, "attr1": "Large", "itemid": "EST-1" }, { "productid": "K9-DL-01", "unitcost": 12.00, "status": true, "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" }, { "productid": "RP-SN-01", "unitcost": 12.00, "status": true, "listprice": 18.50, "attr1": "Venomless", "itemid": "EST-11" } ] } ``` 以上设置和数据可让 `datagrid` 中的 `checkbox` 根据数据状态默认选中或不选中 [^1]。 #### 手动控制 `checkbox` 选中状态 若要手动控制 `checkbox` 的选中状态,可通过遍历 `datagrid` 的来设置。示例代码如下: ```javascript function selall() { var chk = $('#chkall').is(':checked'); var rows = $('#tt').datagrid('getRows'); for (var i = 0; i < rows.length; i++) { $("input:checkbox[name='cbstu']").get(i).checked = chk; } } ``` 在 HTML 中,`datagrid` 表格设置如下: ```html <table id="tt" cellspacing="0" cellpadding="0"> <thead> <tr> <th field="sel"><input type="checkbox" id="chkall" onchange="selall();" /></th> <th field="sid" align="center">学号</th> <th field="StudentName" align="center">姓名</th> <th field="Sex" align="center">性别</th> <th field="IDcode" align="center">身份证</th> <th field="mname">专业</th> <th field="Grade" align="center">年级</th> <th field="showdate" align="center">报名时间</th> </tr> </thead> </table> ``` 这里通过 `selall` 函数实现了点击全选框时,控制 `datagrid` 中所有 `checkbox` 的选中状态 [^2]。 #### 添加 `idField` 属性 在使用 `datagrid` 的 `checkbox` 列时,一定要添加 `idField` 属性,示例代码如下: ```html <table id="table1" class="easyui-datagrid" data-options="idField:'id'"> <thead> <tr> <th field="ck" checkbox="true"></th> </tr> </thead> </table> ``` 添加 `idField` 属性有助于正确处理 `checkbox` 的选择状态 [^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值