Header 使用复选框列筛选和选择行，返回所有行

Question

我有点困惑为什么我在使用 header 过滤时 table.getSelectedData() 时总是得到完整的行列表。我有一个包含 16 行的 table。我 header 过滤电子邮件地址并获得 3 行。然后，我选中 header 中的 select 全部复选框，并使用按钮单击事件来记录 selected 的内容。无论我使用“active”、“visible”还是什么都不用，我总是得到 16 行。

我试过了

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

以及

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

Table初始化如下：

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)}}
            
    ],
});

所以为了描述更多一点，然后我做了一些 header 过滤以减少行，select 我想要的行，并使用按钮来获得 selected数据库删除操作的行。如果我手动 select 特定行，一切正常。

然而，当我使用 header 过滤器减少并单击 header 复选框以 select 所有可见行（假设过滤后有 3 行）时，当我打印出什么已经 selected 我总是得到一切，即 16 行。

删除按钮点击事件如下：

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

Answer 1

getSelectedData函数returns所有选中的行，不管它们当前是否被过滤。

默认情况下，过滤掉的选定行保持选中状态，当移除过滤器并且该行重新出现时，它仍将处于选中状态。

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

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

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

Answer 2

所以我的最终解决方案（在这种情况下检索一组 uuid）已使用 header 过滤过滤，然后使用 "check all" 复选框选择如下

    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);               
    });

再次感谢奥利

Header 使用复选框列筛选和选择行，返回所有行

Header filtering and selecting rows with checkbox column giving back all rows

javascript

tabulator