Tabulator-覆盖现有格式程序

Question

我目前正在利用Js生态系统来开发Python Web框架，以创建交互式页面，我想知道是否有一种方法可以创建定制的格式化程序，并执行一些逻辑，然后在Js现有的格式化程序中重用。

我查看了代码，设法获得了格式工厂，然后能够更改单元格CSS样式，但是我想知道是否已经为此准备好了东西。

有关信息，这是在Python上生成的代码，该代码已插入制表符定制的格式定义中：

function(cell, formatterParams){ 
        const cssAttrs = formatterParams.css;
        var cell = cell.getTable().modules.format.getFormatter('%s').call(cell.getTable().modules.format, cell, formatterParams);
        let frag = document.createRange().createContextualFragment(cell).firstChild;
        Object.keys(cssAttrs).forEach(function(key){frag.style[key] = cssAttrs[key]}); 
        return frag; }

Answer 1

您有两个选择，您可以使用Custom Formatter作为Nrayburn-tech提及的内容，然后将其分配给列定义。

//define formatter outside of the table
var customFormatter = function(cell, formatterParams, onRendered){
    //cell - the cell component
    //formatterParams - parameters set for the column
    //onRendered - function to call when the formatter has been rendered

    return "Mr" + cell.getValue(); //return the contents of the cell;
};

//in the column definition
{title:"Name", field:"name", formatter:customFormatter}

另一个选项是扩展格式模块，可以添加自己的格式化程序，也可以用自己的格式化程序替换现有的格式化程序。 Module Extension Documentation

中详细说明了如何执行此操作

例如，要添加新的文件格式化程序，应在使表格无效之前插入此代码：

Tabulator.prototype.extendModule("format", "formatters", {
    file:function(cell, formatterParams){
        return "<img class='fileicon' src='/images/fileicons/" + cell.getValue() + ".png'></img>";
    },
});

然后您可以像这样访问列定义中的格式化程序：

var table = new Tabulator("#example-table", {
    columns:[
        {field:"Photo", title:"photo", formatter:"file"},
    ],
});

重写现有格式器的逻辑相同，只需在extendModule函数中针对其当前名称定义格式器，它将替换内置格式器。