Question

我处理了一个问题，但感觉像是一个具有解决方法的错误，而不是它在理想条件下应如何运行。如果我尝试将bottomCalc添加到带有嵌套子表的表中，则会出现错误。 bottomCalc或嵌套数据表本身都起作用，问题出在两者的结合上。

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

在rowFormatter的开始处立即通知我的代码中的if语句（改编自Tabulator示例），以检查行是否具有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的方式设置Data。希望对您有帮助

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

制表器可能的错误-当存在嵌套表时，添加列计算会出错

1 个答案: