Tabulator表格：如何实现仅通过复选框进行多行选择？

问题1：selectable = false 时实现复选框多行选择 #

当关闭Tabulator自带的行选择机制（selectable: false），需要手动实现复选框的多选逻辑，不依赖内置选择功能：

• 自定义行和表头的复选框渲染逻辑
• 维护数组存储选中的行ID
• 处理单个复选框点击事件和表头全选/全不选逻辑

完整代码示例 #

<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>

<script>
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 selectedRows = []; // 存储选中的行ID

var columnConfig = [
    {
        title: "",
        formatter: function(cell) {
            // 渲染行内复选框
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = selectedRows.includes(cell.getRow().getData().id);
            
            checkbox.addEventListener('change', function() {
                const rowId = cell.getRow().getData().id;
                if(this.checked) {
                    !selectedRows.includes(rowId) && selectedRows.push(rowId);
                } else {
                    selectedRows = selectedRows.filter(id => id !== rowId);
                }
                updateHeaderCheckbox();
            });
            
            return checkbox;
        },
        titleFormatter: function() {
            // 渲染表头全选复选框
            const headerCheckbox = document.createElement('input');
            headerCheckbox.type = 'checkbox';
            
            headerCheckbox.addEventListener('change', function() {
                selectedRows = this.checked ? tableData.map(item => item.id) : [];
                // 更新所有行的复选框状态
                myTable.getRows().forEach(row => {
                    const checkbox = row.getCell(0).getElement().querySelector('input');
                    checkbox && (checkbox.checked = this.checked);
                });
            });
            
            return headerCheckbox;
        },
        hozAlign: "center",
        headerSort: false,
        width: 50
    },
    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig,
    selectable: false,
    rendered: function() {
        updateHeaderCheckbox();
    }
});

// 同步表头复选框状态
function updateHeaderCheckbox() {
    const headerCheckbox = myTable.getHeader().getCell(0).getElement().querySelector('input');
    if(headerCheckbox) {
        headerCheckbox.checked = selectedRows.length === tableData.length && tableData.length > 0;
    }
}
</script>

问题2：selectable = true 时仅允许复选框触发行选择 #

开启内置行选择（selectable: true）后，通过beforeSelect回调限制只有复选框触发选择，点击其他单元格时阻止选择行为：

• 保留rowSelection列配置
• 在beforeSelect中判断触发源是否为复选框，非复选框触发则返回false阻止选择
• 可选：点击其他单元格时取消当前行选中状态（按需调整）

完整代码示例 #

<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>

<script>
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,
        width: 50
    },
    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig,
    selectable: true,
    // 阻止非复选框触发的行选择
    beforeSelect: function(row, e) {
        const isCheckbox = e.target.type === 'checkbox';
        const isHeaderCheckbox = e.target.closest('.tabulator-header') && e.target.type === 'checkbox';
        return isCheckbox || isHeaderCheckbox;
    },
    // 可选：点击其他单元格时取消该行选中状态（不需要可注释）
    rowClick: function(e, row) {
        const isCheckbox = e.target.type === 'checkbox';
        const isHeaderArea = e.target.closest('.tabulator-header');
        if(!isCheckbox && !isHeaderArea) {
            row.deselect();
        }
    }
});
</script>

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