Question

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

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

}
  });

所有其他表格列应按正常方式排序（当用户对一列进行排序时，如果他移动以排序另一列，则先排序忽略并对新选择的列进行排序。排序列标题有箭头图标）并且它们工作正常。问题是当我尝试对Status列进行排序时，最后排序的列仍然使用它的排序。此时标题中的箭头仍然显示在先前排序的列中。所以这个列排序不按预期工作。

任何帮助将不胜感激。

Answer 1

听起来您需要在绘制图表之前设置以下配置选项 HKQueryAnchor＆amp; sortColumn

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

请参阅以下工作片段，
无论用户点击什么，数据都将在列sortAscending上排序箭头跟随实际点击的内容......

＆＃13;

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']
});

＆＃13;

Google自动化表

1 个答案: