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

Question

我已经成功地实现了一个google可视化表，并通过添加events listener为一列添加了自定义排序过程。

背景：数据来自数据库以呈现表。我有几个表列带有“Status”列。此列应根据不显示该表的另一个数据字段进行排序。（所有数据都来自数据库，只需一次查询。它们都运行良好。）在addListener中，我根据自己的需求对从数据库中获取的数组进行排序，并通过table重新创建表。绘制（数据、选项） 。

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]列应该根据数组中的[sortOrder]字段进行排序。

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

 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

您可以控制排序箭头出现的列（和方向），
而不考虑实际进行的排序

请参阅下面的工作片段，
无论用户单击了什么，数据都将在列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>