jQWidgets jqxGrid基于复选框选中状态过滤表格行的实现方法

实现方法 #

你绑定复选框列的datafield为available，jqxGrid会自动将用户勾选/取消勾选的操作同步到行对象的该属性上，无需额外监听复选框变化事件，只需在获取所有行后过滤对应属性即可。

修改按钮点击事件代码

将原按钮点击逻辑替换为以下内容：

$('#jqxbutton').click(function () {
    // 获取表格所有行数据
    var allRows = $('#jqxgrid').jqxGrid('getrows');
    // 过滤出已勾选复选框的行，保留available属性为true的项
    var checkedRows = allRows.filter(function(row) {
        return row.available === true;
    });
    // 输出结果
    console.log('已勾选的行记录：', checkedRows);
    alert('已勾选记录数量：' + checkedRows.length);
});

如果需要获取未勾选的记录，只需将过滤条件改为row.available === false即可。

内容的提问来源于stack exchange，提问作者Tan