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

Question

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

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

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

问题现在是 Google 可视化表在加载期间始终按第二列排序。如果用户选择任何其他列对表进行排序，表将根据所选列进行排序。它们都正常工作(排序列按表标题中的向下箭头显示)。

但是当我尝试按字段排序时，我添加了自己的排序过程，较早的排序未删除(我可以看到向下箭头标记仍在先前排序的表标题中)，因此使用添加的排序代码排序无法正常工作。如何防止这个问题。

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

更新:说明

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

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 & sortAscending

您可以控制排序箭头出现的列(以及方向)，
无论实际发生的排序如何

请参阅以下工作片段，
无论用户点击什么，数据都会按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>