如何禁止Tabulator树形结构的展开与折叠操作？

可以实现禁止树形结构的展开与折叠，这里提供几个直接可用的方案：

方案一：通过CSS隐藏展开/折叠按钮 #

直接把树形控件的触发按钮隐藏，用户就无法点击操作了，添加以下CSS样式：

.tabulator-tree-toggle {
    display: none !important;
}

方案二：通过事件阻止展开/折叠行为 #

在Tabulator的配置中添加事件监听，直接阻止展开和折叠的默认动作，修改你的代码如下：

table = new Tabulator("#ModuleList", {
    data: treeData,
    dataTree: true,
    dataTreeStartExpanded: true,
    layout: "fitDataTable",
    movableRows: true,
    dataTreeElementColumn: "blank",
    // 新增配置阻止展开折叠
    dataTreeCollapse: function(){
        return false; // 禁止折叠操作
    },
    dataTreeExpand: function(){
        return false; // 禁止展开操作
    },
    columns: [
        {title:"", field:"blank", headerSort:false},
        {title:"Ref", field:"itemref", editor:true, headerSort:false},
        {title:"Item", field:"title", editor:true, headerSort:false},
        {title:"Weighting", field:"weighting", editor:true, validator:["min:0", "max:100", "numeric"], headerSort:false},
        {title:"Default Score", field:"defaultscore", editor:true, validator:["min:" + document.getElementById("ModelMinScore").value, "max:" + document.getElementById("ModelMaxScore").value, "numeric"], headerSort:false},
        {title:"Target Score", field:"targetscore", editor:true, validator:["min:" + document.getElementById("ModelMinScore").value, "max:" + document.getElementById("ModelMaxScore").value, "numeric"], headerSort:false},
    ],
});

方案三：自定义空的展开/折叠元素 #

把展开和折叠的触发元素设为空字符串，这样就不会渲染可点击的控件，修改配置如下：

table = new Tabulator("#ModuleList", {
    data: treeData,
    dataTree: true,
    dataTreeStartExpanded: true,
    layout: "fitDataTable",
    movableRows: true,
    dataTreeElementColumn: "blank",
    // 设为空元素，无触发按钮
    dataTreeExpandElement: "",
    dataTreeCollapseElement: "",
    columns: [
        // 你的列配置保持不变
    ],
});

这三个方案都能达到禁止用户操作树形展开/折叠的目的，推荐优先用方案一或方案二，稳定性更好。

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