如何将forEach遍历的变量传递给Tabulator的formatter格式化函数

问题原因 #

• Tabulator的formatter配置要求传入函数引用，由Tabulator在渲染单元格时自动传入cell参数调用，不能直接执行函数把返回值赋值给formatter
• 原错误写法中formatter = testf(cell, key)属于当场执行函数，此时cell变量未定义，且给formatter赋值的是字符串结果，不符合配置要求
• 额外注意：你的示例中cols是在异步请求的回调里生成的，如果把Tabulator初始化写在全局作用域，会出现初始化时cols还未生成的问题，建议把初始化逻辑放到回调内cols生成完成之后

修正方案 #

方案1：改造testf为高阶函数（更易读，推荐） #

让testf先接收key参数，返回符合formatter要求的、只接收cell参数的函数：

// 高阶函数：接收key，返回实际的formatter函数
let testf = function(key) { 
    return function(cell) {
        return `<div id="${key}">${cell.getValue()}</div>`;
    }
};

keys = ["name", "price", "number"];
doAjax().then(variable => { 
    if (products !== null) {
        let cols = [{title: "number", field: "number"}];
        keys.forEach(function(key) {
            let formatter = "";
            if (key == "number") {
                // 传入当前遍历的key，生成对应formatter函数
                formatter = testf(key);
            }
            cols.push({title: key, field: "data." + key, formatter: formatter});
        });
        // 拿到完整cols后再初始化Tabulator
        var table = new Tabulator("#products", {
            ajaxURL: "api/products",
            columns: cols,
        });
    }
});

方案2：用bind绑定固定参数（无需改动原有函数逻辑） #

调整testf参数顺序，把需要提前绑定的key放到参数列表最前面，再用bind固定key值：

// 调整参数顺序：固定参数key放第一位，Tabulator传入的cell放第二位
let testf = function(key, cell) { 
    return `<div id="${key}">${cell.getValue()}</div>`;
};

keys = ["name", "price", "number"];
doAjax().then(variable => { 
    if (products !== null) {
        let cols = [{title: "number", field: "number"}];
        keys.forEach(function(key) {
            let formatter = "";
            if (key == "number") {
                // bind第一个参数为函数运行时的this指向，不需要改动传null即可，后续参数按顺序绑定到原函数入参
                formatter = testf.bind(null, key);
            }
            cols.push({title: key, field: "data." + key, formatter: formatter});
        });
        var table = new Tabulator("#products", {
            ajaxURL: "api/products",
            columns: cols,
        });
    }
});

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