Tabulator JS中行级联下拉列实现方案咨询

嘿，我来帮你搞定这个Tabulator级联下拉的问题！作为新手遇到这个需求很正常，咱们可以通过两种简单的方式实现核心需求——让第二列的下拉选项跟着第一列的选择动态变化，完全匹配你想要的效果。

方法一：用编辑器的动态values回调（推荐） #

Tabulator的autocomplete编辑器支持把values设为一个函数，每次打开编辑器时都会触发这个函数，我们可以在函数里获取当前行第一列的选中值，然后返回对应的选项集合。这种方式最简洁，也最贴合每行独立级联的场景。

修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tabulator Cascading Dropdown</title>
<!-- 别忘了引入依赖哦 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
<script>
$(function () {
    var tabledata = [{ Need: "1", Surface:"" }];
    
    // 第一列的选项集合
    var NeedOptionSet = {
        "1": "Color",
        "2": "Style"
    };
    
    // 把第二列的选项按第一列的结果分组，方便快速查找
    var SurfaceOptionGroups = {
        "Color": {
            "1": "Blue",
            "2": "Yellow"
        },
        "Style": {
            "1": "S1",  // 这里改成你预期的S1/S2啦
            "2": "S2"
        }
    };

    var table = new Tabulator("#example-table", {
        height: 400,
        data: tabledata,
        layout: "fitColumns",
        pagination: "local",
        paginationSize: 15,
        paginationSizeSelector: [15, 25, 35],
        addRowPos: "top",
        columns: [
            { 
                title: "Need", 
                field: "Need", 
                editor: "autocomplete", 
                editorParams: { 
                    showListOnEmpty: true, 
                    freetext: true, 
                    values: NeedOptionSet 
                }, 
                formatter: 'lookup', 
                formatterParams: NeedOptionSet 
            },
            { 
                title: "Surface", 
                field: "Surface", 
                editor: "autocomplete", 
                editorParams: { 
                    showListOnEmpty: true, 
                    freetext: true, 
                    // 动态返回对应选项的函数
                    values: function(cell) {
                        // 获取当前行第一列的显示值（比如Color/Style）
                        var selectedNeed = cell.getRow().getCell("Need").getFormattedValue();
                        // 返回对应的选项集合，默认给Color的选项
                        return SurfaceOptionGroups[selectedNeed] || SurfaceOptionGroups["Color"];
                    }
                }, 
                // 格式化器也要动态匹配，因为不同行的选项集合不一样
                formatter: function(cell) {
                    var selectedNeed = cell.getRow().getCell("Need").getFormattedValue();
                    var currentOptions = SurfaceOptionGroups[selectedNeed] || SurfaceOptionGroups["Color"];
                    return currentOptions[cell.getValue()] || cell.getValue();
                }
            }
        ]
    });
});
</script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>

关键细节： #

• 我把你预期的S1/S2替换了原来的Bold/Underline，你可以根据需要随时调整SurfaceOptionGroups里的内容。
• 每次打开第二列的编辑器时，都会自动读取当前行第一列的选中值，返回对应的下拉选项，完全实现行内级联。
• 格式化器也改成了动态的，确保不同行的Surface值能正确显示对应的文本。

方法二：监听编辑事件动态更新 #

如果你需要在第一列选择完成后立即更新第二列的显示，或者有额外的逻辑要处理，可以用这种方式——监听第一列的编辑完成事件，然后动态修改第二列的编辑器参数。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tabulator Cascading Dropdown</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
<script>
$(function () {
    var tabledata = [{ Need: "1", Surface:"" }];
    
    var NeedOptionSet = {
        "1": "Color",
        "2": "Style"
    };
    
    var SurfaceOptionSet_Color = {
        "1": "Blue",
        "2": "Yellow"
    };
    
    var SurfaceOptionSet_Style = {
        "1": "S1",
        "2": "S2"
    };

    var table = new Tabulator("#example-table", {
        height: 400,
        data: tabledata,
        layout: "fitColumns",
        pagination: "local",
        paginationSize: 15,
        paginationSizeSelector: [15, 25, 35],
        addRowPos: "top",
        columns: [
            { 
                title: "Need", 
                field: "Need", 
                editor: "autocomplete", 
                editorParams: { 
                    showListOnEmpty: true, 
                    freetext: true, 
                    values: NeedOptionSet 
                }, 
                formatter: 'lookup', 
                formatterParams: NeedOptionSet 
            },
            { 
                title: "Surface", 
                field: "Surface", 
                editor: "autocomplete", 
                editorParams: { 
                    showListOnEmpty: true, 
                    freetext: true, 
                    values: SurfaceOptionSet_Color 
                }, 
                formatter: 'lookup', 
                formatterParams: SurfaceOptionSet_Color 
            }
        ],
        // 监听单元格编辑完成事件
        cellEdited:function(cell){
            // 只处理第一列的编辑操作
            if(cell.getField() === "Need"){
                var row = cell.getRow();
                var selectedNeed = cell.getFormattedValue();
                // 根据选择结果切换第二列的选项集合
                var targetOptions = selectedNeed === "Color" ? SurfaceOptionSet_Color : SurfaceOptionSet_Style;
                // 更新第二列的编辑器参数
                row.getCell("Surface").getColumn().setDefinition("editorParams.values", targetOptions);
                // 更新第二列的格式化参数
                row.getCell("Surface").getColumn().setDefinition("formatterParams", targetOptions);
                // 刷新单元格，确保显示正确
                row.getCell("Surface").refresh();
            }
        }
    });
});
</script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>

两种方法怎么选？ #

• 方法一更简洁，适合大多数场景，不需要额外监听事件，编辑器打开时自动匹配最新选项。
• 方法二更灵活，适合需要在第一列选择后立即执行其他逻辑（比如清空第二列值）的场景。

你可以根据自己的需求挑一种，两种都能完美实现你要的级联效果！

内容的提问来源于stack exchange，提问作者M Azeem N