自定义 Google 可视化表中的排序列

Question

我已经成功实现了一个谷歌可视化表格，并通过添加事件监听器为一列添加了自定义排序过程。

背景：数据来自数据库以呈现表格。我有几个表列带有“状态”列。此列应根据未显示表格的另一个数据字段进行排序。（所有数据都来自一个查询的数据库。它们都运行良好。）在 addListener 中，我对从数据库中获取的数组进行排序我的要求并通过table.draw(data, options); 重新创建表。

google.visualization.events.addListener(table, 'sort',
          function(event) {
        if(event.column ==  4){
        }
   }
} 

问题现在谷歌可视化表格在加载过程中总是按第二列排序。如果用户选择任何其他列来排序表将根据选定的列进行排序。它们都正常工作（按表头中的向下箭头排序的列显示）。

但是当我尝试按字段排序时，我添加了自己的排序过程，之前的排序没有被删除（我可以在之前排序的表格标题处看到向下箭头标记），因此添加的排序代码无法正常排序。如何防止此问题。

如果不清楚或需要更多信息，请告诉我。

更新：解释

从数据库创建的数组中绘制表格。这是结构

Array
(
    [0] => Array
        (
            [Field 1] => test 1
            [Field 2] =>test 2
            [sortOrder] => 4
            [Field 3] => Array
                (
                    [key 1] => val 1
                    [Name] => test
                    [Date] => 2016-08-18 00:00:00
                    [warningLevel] => OK
                )

        )
....
....
...

在这个数组中，我使用 [Field 1]、[Field 2] 和 [warningLevel] 字段作为表格列。但是[warningLevel]column should sort according to [sortOrder] field in array。

所以我做了什么，我添加了侦听器并在其中重新排列（排序）整个数据数组并再次重新创建表。

 google.visualization.events.addListener(table, 'sort',
          function(event) {
          if(event.column ==  4){
vData.sort(function(a, b) {
                    var valueA, valueB;

                    valueA = a['sortOrder']; 
                    valueB = b['sortOrder'];
                    if (valueA < valueB) {
                        return -1;
                    }
                    else if (valueA > valueB) {
                        return 1;
                    }
                    return 0;
                });
table.draw(vdata, options);

}
  });

所有其他表列应按正常方式排序（当用户对一列进行排序时，如果他移动到对另一列排序较早排序忽略并排序新选择的列。排序的列标题有箭头图标），他们工作正常。问题是当我尝试对状态列进行排序时，最后一个排序列仍然使用它的排序。标题中的箭头仍然显示在早期的排序列中。因此，此列排序无法按预期工作。

任何帮助将不胜感激。

Answer 1

听起来你需要在绘制图表之前设置以下配置选项
sortColumn & sortAscending

您可以控制排序箭头出现在哪一列（和方向），
无论实际发生的排序如何

请参阅以下工作 sn-p，
无论用户点击什么，数据都会在0列上排序
而箭头跟随实际点击的内容......

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Level', 'Status',   'Sort'],
      [1,       'Critical', {v: 1, f: 'Critical'}],
      [2,       'OK',       {v: 2, f: 'OK'}],
      [3,       'Warning',  {v: 3, f: 'Warning'}],
      [4,       'Message',  {v: 4, f: 'Message'}]
    ]);

    var options = {
      allowHtml: true,
      cssClassNames: {
        tableCell: 'googleTableCell'
      },
      sort: 'event',
      sortAscending: true,
      sortColumn: 0
    };

    var chart = new google.visualization.Table(document.getElementById('chart_div_table'));

    google.visualization.events.addListener(chart, 'sort', function (sender) {
      data.sort([{column: 0, desc: !sender.ascending}]);

      options.sortAscending = sender.ascending;
      options.sortColumn = sender.column;
      
      chart.draw(data, options);
    });

    chart.draw(data, options);
  },
  packages: ['table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_table"></div>