Tabulator表头复选框不遵循Selection Eligibility规则的修复咨询

我在Tabulator中使用了Selection Eligibility功能，运行下方代码后，点击表头复选框会选中所有行，完全无视selectableRowsCheck设定的筛选条件（仅允许选中年龄大于18的行），该如何修复？

环境信息 #

• Tabulator版本：5.6.1
• 使用特性：selectableRows 和 selectableRowsCheck

原代码 #

HTML #

<link href="https://unpkg.com/tabulator-tables@5.6.1/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.6.1/dist/js/tabulator.min.js"></script>
<div id="tableDiv"></div>

CSS #

div.tabulator-unselectable > div:first-child > input {
    display: none;
}

JavaScript #

var tableDiv = document.querySelector("#tableDiv");

var tableData = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

var columnConfig = [ //Define Table Columns
    //my checkbox selection column
   {
        title: "",
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        hozAlign: "center",
        headerSort: false,
       
    },

    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig,
    selectableRows: true,
    selectableRowsCheck:function(row){
          return row.getData().age > 18; //仅允许选中年龄大于18的行
      }
});

修复方案 #

Tabulator默认的表头全选逻辑不会自动应用selectableRowsCheck的过滤条件，需要自定义表头复选框的点击事件，手动筛选符合条件的行再执行选中操作：

修改后的核心代码 #

var columnConfig = [ //Define Table Columns
    //my checkbox selection column
   {
        title: "",
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        hozAlign: "center",
        headerSort: false,
        // 自定义表头复选框点击逻辑
        titleFormatterParams: {
            click: function(e, column) {
                const table = column.getTable();
                const allRows = table.getRows();
                // 复用selectableRowsCheck的条件筛选可选中行
                const eligibleRows = allRows.filter(row => row.getData().age > 18);
                // 判断是否所有符合条件的行已被选中
                const allSelected = eligibleRows.every(row => row.isSelected());

                if(allSelected) {
                    eligibleRows.forEach(row => row.deselect());
                } else {
                    eligibleRows.forEach(row => row.select());
                }
            }
        }
    },

    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig,
    selectableRows: true,
    selectableRowsCheck:function(row){
          return row.getData().age > 18; //保留原条件，确保单行选择限制
      }
});

说明 #

• 自定义的表头点击逻辑会严格按照selectableRowsCheck的条件筛选行，只对符合条件的行执行全选/取消操作
• 保留原selectableRowsCheck配置，确保用户单独点击行复选框时也会受到条件限制
• 表头复选框的状态会自动同步（Tabulator会根据符合条件行的选中状态自动更新表头复选框的勾选状态）

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