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

Posted 2023-02-26

【中文标题】自定义 Google 可视化表中的排序列

【英文标题】：Customize Sorting column in Google Visualization Table

【发布时间】：2016-07-29 04:28:33

【问题描述】：

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

背景：数据来自数据库以呈现表格。我有几个表列带有“状态”列。此列应根据未显示表格的另一个数据字段进行排序。（所有数据都来自一个查询的数据库。它们都运行良好。）在 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);


  );

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

任何帮助将不胜感激。

【参考方案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>

【讨论】：

希望这会有所帮助，这个问题有点难以理解，如果你有一个工作示例会有所帮助......

谢谢，我会试试这个，让你知道。您知道如何更改默认排序列吗？通常，当页面加载表时，使用第二列进行排序。我需要将其更改为第一列。

当我添加 sortAscending: true, sortColumn: 0 我添加的排序功能不起作用。这个数组很复杂，很难解释。我会再试一次，很好地描述这个问题。顺便说一句，感谢您的支持。

我再解释一遍。有空的时候请看一下。

当您使用sort: 'event'时，您必须在绘制图表之前提供已经按照您需要的顺序排序的数据。 sortAscending 和 sortColumn 仅提供箭头的位置。 -- 您可以使用DataTable.sort，而不是对数组进行排序并重新创建数据表。你能用你用来加载数据表的代码更新问题吗？这是您可以使用对象表示法设置自定义排序的地方，类似于上面的答案...