制表符：如何在单独的行上获取多行数据

Question

我有一个带有键/值对的对象，其中值在数组中以逗号分隔。
例如

var myObject = { key1 : [v11, v12, v13, v14] , key2 : [v21, v22, v23, v24]};

我现在的工作是将键作为列标题和单行中的所有数组值。行数据显示为逗号分隔。 我有一个 mutator 将 "," 转换为 "\n" ，然后转换行数据并仍然显示在单行中，尽管在不同的行上。

我需要的是在单独的行上显示每个数组中的每个值，就像在 excel 中一样。并且（如果可能的话）合并对应值行的键行。

这里是相关代码

<script>
    //converts comma to newline
var customMutator = function(value, data, type, params, component){
    return value.join("\n");
}
             var tableData = [
             {id:1, key:"key1", values: ["v11", "v12", "v13", "v14"]},
             {id:1, key:"key2", values: ["v21", "v22", "v23", "v24"]},
             ];
 var table = new
Tabulator("#example-table", {
             data:tableData,
             columns:[
             {title:"key", field:"key", formatter:"textarea"},
             {title:"values",field:"values", formatter:"textarea", mutator:customMutator,},
             ],
         });
 </script>

Answer 1

因为您只对查看数据而不是对其进行编辑感兴趣，所以最简单的事情是自定义格式化程序。 （如果您需要编辑该格式的数据，那么我目前不知道该怎么做。）

您的自定义格式化程序将为您的值数组中的每个项目创建一个带有边框的元素。这是您可以使用的自定义格式化程序的示例。

function customFormatter(cell, formatterParams, onRendered) {
    const val = cell.getValue();
    const cellDiv = document.createElement('div');
    for (let i = 0; i < val.length; i++){
        const valItemDiv = document.createElement('div');
        valItemDiv.textContent = val[i];
        valItemDiv.style.border = 'purple 1px solid';
        cellDiv.appendChild(valItemDiv);
    }
    return cellDiv;
}

这是一个完整的工作示例。 https://jsfiddle.net/nrayburn/sqdvkm5u/11/