tabulator可能的错误 - 当存在嵌套表时添加列计算时出错

Question

我处理了一个问题，但感觉就像是一个解决方法的错误，而不是它应该如何在理想条件下运行。如果我尝试将bottomCalc添加到带有嵌套子表的表中，我会收到错误。无论是bottomCalc还是嵌套数据表都可以自行工作，问题来自两者的结合。

问题在于添加嵌套表的rowFormatter。将“bottomCalc”行添加到表中并调用rowFormatter函数，但bottomCalc行显然没有任何嵌套数据，因此来自tabulator.min.js的错误“无法读取未定义的属性'slice'

注意我的代码中的if语句（改编自Tabulator示例）就在rowFormatter的开头检查行是否有serviceHistory数据。对我来说这感觉像是一种解决方法，但这就是我需要通过错误。

function toggleNestedTable(){   
    var fordHistory = [
        {date:"01/02/2016", engineer:"Steve Boberson", actions:"Changed oli filter", cost:75.99},
        {date:"07/02/2017", engineer:"Martin Stevenson", actions:"Break light broken", cost:28.99}];

    var detailTables = document.getElementsByClassName("detailTable")
    for (var x = 0; x< detailTables.length; x++){
        detailTables[x].parentNode.removeChild(detailTables[x]);
    }

    var emptyArray = [];

    if(table.getRow(1).getData().serviceHistory.length == 0){
        table.getRow(1).update({"serviceHistory":fordHistory});
    } else {
       table.getRow(1).update({"serviceHistory":emptyArray});
    }
}

var table;

function loadTabulator(){
    var tableData = [
        {id:1, make:"Ford", model:"focus", reg:"P232 NJP", color:"white", serviceHistory:[], cost:3102.55},
        {id:2, make:"BMW", model:"m3", reg:"W342 SEF", color:"red", serviceHistory:[], cost:123 },
        {id:3, make:"Smurf", model:"28", reg:"WLHUNG", color:"porple", serviceHistory:[], cost:7654.00},]

    table = new Tabulator("#test2", {
        layout:"fitData",
        resizableColumns:false,
        data:tableData,
        columns:[
            {title:"Make", field:"make"},
            {title:"Model", field:"model"},
            {title:"Registration", field:"reg"},
            {title:"Color", field:"color"},
            {title:"Cost", field:"cost", formatter:"money", align:"right", bottomCalc:"sum", bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ".", thousand: ","}},
        ],
        rowFormatter:function(row){
            if (row.getData().serviceHistory){
                //create and style holder elements
                var holderEl = document.createElement("div");
                var tableEl = document.createElement("div");

                holderEl.style.boxSizing = "border-box";
                holderEl.style.padding = "10px 30px 10px 10px";
                holderEl.style.borderTop = "1px solid #333";
                holderEl.style.borderBotom = "1px solid #333";
                holderEl.style.background = "#ddd";
                holderEl.classList.add("detailTable");

                tableEl.style.border = "1px solid #333";

                if (row.getData().serviceHistory.length > 0){
                    holderEl.appendChild(tableEl);

                    row.getElement().appendChild(holderEl);
                    //holderE1.classList.add("detailTable");

                    var subTable = new Tabulator(tableEl, {
                        layout:"fitData",
                        data:row.getData().serviceHistory,
                        columns:[
                            {title:"Date", field:"date", sorter:"date"},
                            {title:"Engineer", field:"engineer"},
                            {title:"Action", field:"actions"},
                            {title:"Cost", field:"cost", formatter:"money", align:"right", bottomCalc:"sum", bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ".", thousand: ","}},
                        ]
                    })
                }
            }
        },
    });
}

这是处理这个的最好方法吗？

Answer 1

我没有正确理解这里的要求，但是你得到的错误是因为你用serviceHistory Data初始化表，而你应该把数据设置为这个小提琴Fiddle。希望这可以帮助

subTable.setData(row.getData().serviceHistory);