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

Question

我有一个 object 和 keys/value 对，其中值在数组中以逗号分隔。
例如

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

我现在正在做的是键作为列 headers 进入，所有数组值都在一行中。行数据显示为逗号分隔。我有一个将 "," 转换为 "\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/

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

Tabulator: How to get multiline data on separate rows

javascript

tabulator