标题过滤和选择带有复选框列的行返回所有行答案

【问题标题】：Header filtering and selecting rows with checkbox column giving back all rows标题过滤和选择带有复选框列的行返回所有行
【发布时间】：2020-01-07 15:27:48
【问题描述】：

我有点困惑，为什么我在使用标头过滤时执行table.getSelectedData() 时总是得到完整的行列表。我有一个包含 16 行的表。我对电子邮件地址进行标题过滤并获得 3 行。然后我检查标题中的全选复选框并使用按钮单击事件来记录选择的内容。无论我使用“活动”、“可见”还是什么都不用，我总是得到 16 行。

我试过了

cell.getRow().toggleSelect("active");
cell.getRow().toggleSelect("visible");
cell.getRow().toggleSelect();

随着

table.getSelectedData("active");
table.getSelectedData("visible");
table.getSelectedData();

表初始化如下：

var table = new Tabulator("#rules-table", {
    height: 600, 
    data:tabledata,  
    layout:"fitColumns",
    persistentSort:true,
    selectable:true,
    selectablePersistence:false,
    pagination:"local", 
    movableColumns: true,  
    columns:[  
        {title:"UUID",        field:"uuid",        headerFilter:"input", frozen:true, width:300},
        {title:"Type",        field:"type",        headerFilter:"input", width:100},
        {title:"SubType",     field:"subtype",     headerFilter:"input", width:100},
        {title:"AssetUUID",   field:"asset_uuid",  headerFilter:"input", width:300},
        {title:"Info",        field:"info",        headerFilter:"input"},
        {title:"Owner",       field:"owner",       headerFilter:"input", width:200},
        {formatter:"rowSelection", titleFormatter:"rowSelection", align:"center", width:20, headerSort:false, cellClick:function(e, cell){
                cell.getRow().toggleSelect("active");
        }},
        {formatter:printIcon, width:0, align:"center", width:26, headerSort:false, cellClick:function(e, cell){generate_assets_options_menu(e, cell)}}
            
    ],
});

所以为了描述更多，然后我进行一些标题过滤以减少行，选择我想要的行，并使用按钮获取选定的行以进行数据库删除操作。如果我手动选择特定行，一切正常。

但是，当我使用标题过滤器缩减并单击标题复选框以选择所有可见行（假设过滤后有 3 行）时，当我打印出已选择的内容时，我总是得到所有内容，即 16 行。

删除按钮点击事件如下：

var selectedData = table.getSelectedData("active");
var selectedRows = table.getSelectedRows("active");
    
console.log(selectedData);
console.log(selectedRows);

【问题讨论】：

标签： javascript tabulator

【解决方案1】：

getSelectedData 函数返回所有选定的行，无论它们当前是否被过滤。

默认情况下，被过滤掉的选定行仍然被选中，当过滤器被删除并且该行重新出现时，它仍然会被选中。

如果您只想查看已过滤并被选中的行，我建议您使用 getRows 函数来获取活动行组件的数组.然后在数组上使用过滤函数来获取过滤后的选定行：

var rows = table.getRows("active");

var selectedRows = rows.filter(function(row){
    return row.isSelected();
});

【讨论】：

谢谢 Oli，我想我认为设置标题复选框可能与过滤一起工作，并且只选择活动的内容，但这对我来说是一种享受。对于其他寻找解决方案的人来说，我不得不调用 table.getRows 而不是 table.getRow 来获取行数组。
我已经修改了答案以修复错字。如果您认为这是一个有用的答案，请将其标记为答案，以便其他人可以找到它

【解决方案2】：

所以我的最终解决方案（在这种情况下检索一组 uuid）已通过标头过滤进行过滤，然后使用“全选”复选框进行选择，如下所示

    var rule_uuids = [];
    var rows = table.getRows("active");

    var selectedRows = rows.filter(function(row){
        return row.isSelected();
    });

    selectedRows.forEach(function (item) {                          
        rule_uuids.push(item._row.data.uuid);               
    });

再次感谢奥利

【讨论】：