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

Question

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

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

我现在正在工作的是键作为列标题进入，并且所有数组值都在单行中。行数据显示为逗号分隔。我有一个转换器，可以将“，”转换为“ \ 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/