Tabulator复选框全选异常：仅选中当前可视记录，滚动后记录未选中

这问题我之前帮人处理过，核心原因是Tabulator的虚拟滚动机制在搞鬼！它只会把当前视图内的行渲染到DOM里，滚动后才会加载新行的DOM元素。你直接用jQuery选择input[name=custmisedtab]只能拿到当前已经渲染的行，那些还没出现在屏幕里的行根本还没生成DOM节点，自然选不到。

正确的做法是完全利用Tabulator自身的API来处理行选择，而不是直接操作DOM元素，下面给你两种可行的方案：

方案一：用Tabulator官方的行选择格式化器（最推荐） #

Tabulator内置了rowSelection格式化器，自带表头全选复选框，而且自动处理虚拟滚动的问题，不用自己写复杂逻辑：

// 表格初始化示例
var table = new Tabulator("#example-table", {
    columns: [
        { 
            formatter: "rowSelection", 
            titleFormatter: "rowSelection", 
            hozAlign: "center", 
            headerSort: false,
            cellClick: function(e, cell){
                // 可选：点击单元格时的自定义逻辑
            }
        },
        // 其他业务列...
    ],
    // 可选：监听行选择变化事件，做后续处理
    rowSelectionChanged:function(data, rows){
        console.log("当前选中了 " + data.length + " 行数据");
    },
});

用这个方案的话，表头的复选框默认就支持全选/反选所有行——不管行是否在当前视图内，Tabulator会自动维护所有行的选中状态，滚动后新渲染的行也会同步选中状态。

方案二：自定义全选按钮，通过API操作 #

如果你一定要用自己的全选/反选按钮，那就别直接操作DOM，调用Tabulator的选择API就行：

// 全选按钮点击事件
document.getElementById("select-all-btn").addEventListener("click", function(){
    // 选中所有行，包括未渲染的行，Tabulator内部会记录状态
    table.selectRow("*");
});

// 取消全选按钮点击事件
document.getElementById("deselect-all-btn").addEventListener("click", function(){
    // 取消所有行的选中状态
    table.deselectRow("*");
});

如果你的自定义复选框需要和Tabulator的选中状态同步，还可以监听rowSelectionChanged事件来更新按钮状态，或者在设置行选中状态后手动触发视图刷新（一般Tabulator会自动处理，可选）：

table.redraw();

再唠唠为什么原来的方法不行 #

Tabulator的虚拟DOM机制会动态创建/销毁行DOM：离开视图的行DOM会被销毁，新进入视图的行DOM才会生成。你用$('input[name=custmisedtab]')只能选中当前存在的DOM元素，那些还没被渲染的行根本没有对应的input节点，所以滚动后新出现的行不会被选中。而Tabulator的API会在内部维护所有行的选中状态，不管行是否被渲染，当行被渲染时会自动根据内部状态设置复选框的checked属性。

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