从制表器中的json加载数据？

Question

我有这个 json 变量，想通过制表符来绘制表格：

mydata=
[
  {
    "trade_symbol": "Media",
    "technical_sum_List": [
      19,
      5,
      4
    ],
    "volume_sum_List": [
      6,
      1
    ],
    "pivot_sum_list": [
      5,
      0,
      0
    ]
  },
  {
    "trade_symbol": "Sport",
    "technical_sum_List": [
      18,
      4,
      4
    ],
    "volume_sum_List": [
      3,
      4
    ],
    "pivot_sum_list": [
      5,
      0,
      0
    ]
  },
  {
    "trade_symbol": "Dance",
    "technical_sum_List": [
      13,
      10,
      5
    ],
    "volume_sum_List": [
      1,
      6
    ],
    "pivot_sum_list": [
      2,
      2,
      0
    ]
  }
]

现在我想通过制表符在每一列中插入技术和列表 [1] 或技术和列表 [2]。 在制表器中，我们只能使用字段：“technical_sum_List”，不接受 Technical_sum_List[1]！

Answer 1

可能有更简单的方法，但您可以通过使用customFormatter 来做到这一点。要点是，当您定义表格列时，您添加一个formatterParam，它告诉 Tabulator 要引用数组中的哪个索引以及自定义格式化程序函数的名称。定义一个单独的函数意味着您可以将它重用于所有数组。

{title:"B-1", field:"technical_sum_List", formatterParams: {index:0}, formatter: customFormatter},

---

获取单元格值，然后使用 formatterParams 引用并返回该数组位置的数据。

function customFormatter(cell, formatterParams) {
   return cell.getValue()[formatterParams.index];
}

let myData = [{
		"trade_symbol": "Media",
		"technical_sum_List": [
			19,
			5,
			4
		],
		"volume_sum_List": [
			6,
			1
		],
		"pivot_sum_list": [
			5,
			0,
			0
		]
	},
	{
		"trade_symbol": "Sport",
		"technical_sum_List": [
			18,
			4,
			4
		],
		"volume_sum_List": [
			3,
			4
		],
		"pivot_sum_list": [
			5,
			0,
			0
		]
	},
	{
		"trade_symbol": "Dance",
		"technical_sum_List": [
			13,
			10,
			5
		],
		"volume_sum_List": [
			1,
			6
		],
		"pivot_sum_list": [
			2,
			2,
			0
		]
	}
]

var table = new Tabulator("#example-table", {
    height:"311px",
    columns:[
    {title:"A", field:"trade_symbol"},
    {title:"B-1", field:"technical_sum_List", 
    formatterParams: {index:0},
    formatter: customFormatter},
    
     {title:"B-2", field:"technical_sum_List", 
    formatterParams: {index:1},
    formatter: customFormatter},
    
     {title:"B-3", field:"technical_sum_List", 
    formatterParams: {index:2},
    formatter: customFormatter},
    
    ],
});

function customFormatter(cell, formatterParams) {
   return cell.getValue()[formatterParams.index];
}


table.setData(myData);

<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>

<div id="example-table"></div>

Answer 2

@spring 是对的，列绑定只能遍历对象而不是数组。

@spring 的方法可能有效，但您必须小心，因为过滤器和排序只会看到数组而不是数据。

一个更好的方法可能是使用 mutators，这将使过滤器和排序器可以访问数据。所以我们可以使用@springs 代码并通过一些调整使其工作：

//define mutator
function customMutator(value, data, type, params) {
   return data[params.field][params.index];
}

//assign mutator to columns
var table = new Tabulator("#example-table", {
    height:"311px",
    columns:[
    {title:"A", field:"trade_symbol"},
    {title:"B-1", field:"b1", 
    mutatorParams: {index:0, field:"technical_sum_List"},
    mutator: customMutator},

     {title:"B-2", field:"b2", 
    mutatorParams: {index:1, field:"technical_sum_List"},
    mutator: customMutator},

     {title:"B-3", field:"b3", 
    mutatorParams: {index:2, field:"technical_sum_List"},
    mutator: customMutator},

    ],
});

这种方法有几个好处，这意味着可以对列进行排序和过滤并包含在下载中。

这也意味着现在每一列都有自己独特的字段，因此可以更容易地从表外查找。

总之格式化程序只是可视化的，不会影响排序和过滤。另一方面，mutators 会更新基础数据并且确实会影响排序、过滤和其他一切。

更多详情请见Mutator Documentation

Answer 3

谢谢。

我找到了最佳答案： 我们必须使用formatter: customFormatter

        function customFormatter(cell, params) {
           return cell.getValue()[params.myid].rvalue;
        }
        
        
        for(var r=0;r<alldata[0].result.length;r++){
            table.addColumn({title:alldata[0].result[r].alias_title ,field:"result", formatterParams: {myid:r}, formatter: customFormatter});
        }