【问题标题】:Tabulator mutator doesn't display any dataTabulator mutator 不显示任何数据
【发布时间】:2020-01-11 18:16:35
【问题描述】:

给出下表描述:

<script>
    var customMutator = function(value, data, type, params, component){
        return data.category_name + " " + data.short_description;
    } ;

    var tabledata = [
    {id:1, category_name:"IT", short_description:"This is an IT message", long_description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", valid_from:"2019-12-05T10:48:00", valid_to:"2018-12-04T22:00:00"},
    {id:2, category_name:"Bookeeping", short_description:"This is an bookeeping message", long_description:"Lorem ipsum dolor azaz sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", valid_from:"2019-12-04T10:48:00", valid_to:"2019-12-04T22:00:00"},
    ];

    var printIcon = function(cell, formatterParams, onRendered){
        return '<span  style="color:blue;"><i class="far fa-edit"></i></span>';
    };

    var table = new Tabulator("#mb-table", {
        placeholder:"Keine Nachricht vorhanden...",
        height: window.innerHeight - 53,
        layout:"fitColumns",
        langs:{
            "de-de":{
                "headerFilters":{
                    "default":"Filtern..."
                }
            }
        },
        columns:[
            {title:"Kategorie", field:"category_name", headerFilter:true, width:120},
            {title:"Kat", field:"new_kat", mutator:customMutator, headerFilter:true, width:120},
            {title:"Nachricht", field:"short_description", headerFilter:true, formatter:function(cell, formatterParams){
                var val1 = cell.getValue();
                var val2 = cell.getRow().getData().long_description;
                cell.getElement().style.whiteSpace = "pre-wrap";

                return "<span style='font-weight:bold;'>" + val1 + "</span><br><span style='word-break: normal;'>" + val2 + "</<span>";
                }
            },
            {title:"Gültig von", field:"valid_from", headerFilter:true, width:110, sorter:"datetime", sorterParams:{format:"YYYY-MM-DDThh:mm:ss"},
                formatter:"datetime", formatterParams:{
                    inputFormat:"YYYY-MM-DDThh:mm:ss",
                    outputFormat:"DD.MM.YYYY hh:mm"
                },
            },
            {title:"Gültig bis", field:"valid_to", headerFilter:true, width:110, sorter:"datetime", sorterParams:{format:"YYYY-MM-DDThh:mm:ss"},
                formatter:"datetime", formatterParams:{
                    inputFormat:"YYYY-MM-DDThh:mm:ss",
                    outputFormat:"DD.MM.YYYY hh:mm"
                },
            },
            {formatter:printIcon, align:"center", width:10, headerSort:false,
                cellClick:function(e, cell){alert("Printing row data for: " + cell.getRow().getData().id)}},
            {formatter:"buttonCross", width:10, align:"center", headerSort:false,
                cellClick:function(e, cell){alert("Printing row data for: " + cell.getRow().getData().category_name)}},
        ]
    });

    table.setLocale("de-de");
    table.setData(tabledata);
</script>

我没有看到 Kat 列中显示任何内容。 我做错了什么?

编辑: 实际上,甚至没有调用 mutator 函数。 如果我放置 console.log(data); (当然是在返回之前)进入函数我在控制台中看不到任何东西

【问题讨论】:

    标签: tabulator


    【解决方案1】:

    升级到 V. 4.5.3 解决了这个问题。

    【讨论】:

    • 在 4.5.3 中对突变系统进行了一些更新,以使行为更加一致
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多