时间戳

首页 > 解决方案 > 制表符嵌套行

tabulator - 制表符嵌套行

问题描述

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

例如

父行具有以下标题：Make、Model、SellDate、Warranty 上述标题的数据类型为：String、String、Date、Boolean

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

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

制造商、型号、销售日期、保修
BMW 、S3、2017 年 12 月
13 日、是 2017 年 12 月 13 日、2010 年 12 月 13 日、人工和零件

标签： tabulator

解决方案

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

在您的外部表配置中，指定：

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,
    });
}

编辑：在意识到它比第一次揭示的更复杂之后，我更新了我的代码。请小心，因为此代码使用了一些不打算向开发人员公开的未记录的属性和方法。

推荐阅读