Question

我想知道是否有可能有一个嵌套的数据树，其中子行的标题与父行的标题不同。

例如

父行具有以下标题：品牌，型号，SellDate，保修上面标头的数据类型为：字符串，字符串，日期，布尔值

子行将具有以下标题：保修开始日期，保修结束日期，保修类型上面标头的数据类型为：日期，日期，字符串

所以我想创建这样的东西：

制造，型号，销售日期，保修
    宝马，S3，2017年12月13日，是的
     2017年12月13日，2010年12月13日，人工和零件

Answer 1

我刚写完同样的东西。您可以结合使用嵌套数据和行格式化程序来完成此操作。

在外部表配置上，指定：

dataTree: true,
rowFormatter: childRowFormatter,

然后，对于rowFormatter函数，您可以指定如下所示的内容（遵循Tabulator自己的嵌套表示例的开头）：

function childRowFormatter(row) {
    // skip if not a child/nested data row - let main table rows render as usual
    if (!row.getTreeParent())
        return;

    var rowEl = row.getElement();
    var parentChildData = row.getTreeParent().getData()._children;

    // only generate a new table for the first row of child data
    if (
        row.getPrevRow().getIndex() !== row.getTreeParent().getIndex() || 
        row.getPrevRow().getPosition() < 0
    ) {
        rowEl.remove();
        // set row element to empty element without size
        row._row.element = document.createElement('span');
        return;
    }

    // remove generated cell elements
    row._row.deleteCells();

    // 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.background = "#ddd";
    holderEl.appendChild(tableEl);

    // replace with holder
    rowEl.appendChild(holderEl);

    // create the new table
    var subTable = new Tabulator(tableEl, {
        data: parentChildData,
        columns: [
            { ... },
            ...
        ],
        dataTree: true,
        dataTreeStartExpanded: true,
        rowFormatter: childRowFormatter,
    });
}

编辑：我意识到自己的代码比最初揭示的要复杂得多，因此更新了代码。请谨慎，因为此代码使用了一些未公开的属性和方法，这些属性和方法并没有向开发人员公开。

制表符嵌套行

1 个答案: