Tabulator选择资格功能失效：复选框列及表头全选不符合预期

问题现象 #

设置selectableRowsCheck规则要求仅年龄大于18的行可被选择，但实际所有行都能选中；点击表头复选框时，会直接选中所有行，完全忽略设定的选择条件。

问题原因 #

1. 数据类型不匹配：数据源中age字段是字符串类型，直接用>做比较会触发字符串字典序判断（例如"12" > "18"会被错误判定为true），导致选择规则逻辑失效。
2. 表头复选框默认行为：表头的全选复选框默认逻辑是选中所有行，不会自动应用selectableRowsCheck的过滤规则，需要手动自定义处理逻辑。

解决方案 #

1. 修正年龄数值比较逻辑 #

将selectableRowsCheck中的字符串比较改为数值比较，确保判断逻辑正确：

selectableRowsCheck:function(row){
    return parseInt(row.getData().age, 10) > 18; // 转为整数后再比较
}

2. 自定义表头复选框的选择逻辑 #

在复选框列的配置中，添加titleFormatterParams，自定义表头复选框的勾选/取消勾选行为，只选择符合条件的行：

{
    title: "",
    formatter: "rowSelection",
    titleFormatter: "rowSelection",
    hozAlign: "center",
    headerSort: false,
    titleFormatterParams: {
        onCheck: function(){
            // 只选中符合条件的行
            myTable.selectRows(function(row){
                return parseInt(row.getData().age, 10) > 18;
            });
        },
        onUncheck: function(){
            // 取消所有选中行
            myTable.deselectAll();
        }
    }
}

完整修改后的代码 #

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 = [
    {
        title: "",
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        hozAlign: "center",
        headerSort: false,
        titleFormatterParams: {
            onCheck: function(){
                myTable.selectRows(function(row){
                    return parseInt(row.getData().age, 10) > 18;
                });
            },
            onUncheck: function(){
                myTable.deselectAll();
            }
        }
    },
    {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,
    selectableRowsCheck:function(row){
        return parseInt(row.getData().age, 10) > 18;
    }
});

HTML部分

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/css/tabulator.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/js/tabulator.min.js"></script>
<div id="tableDiv"></div>

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