Question

我对Google Visualization库存在一些问题。我在屏幕上构建了一个非常简单的表，我需要禁用排序，但仅限于某个列。我已经浏览了他们的文档，发现您可以为覆盖默认值的事件定义自己的函数，但它不起作用。这是一个非常简单的例子......

var chart = new google.visualization.Table(document.getElementById('myTable'));
google.visualization.events.addListener(chart, 'sort', function(e) { handleSort(e, chart); });
chart.draw(opts, dataTable);

function handleSort(e, chart) {
    console.log('inside sort');
    return false;
}

当我点击列标题时，我得到了排序＆＃39;内的控制台日志，但该表将对该列进行排序。我甚至试过......

function handleSort(e, chart) {
    if(e.column == 9) {
        chart.options['sortColumn'] = 0;
        chart.options['isAscending'] = true;
    }
}

单击第9列的列标题时，它仍会在第9列上排序。我无法让它停止对该列进行排序。基本上我在第9列的标题中有一个按钮，当用户单击按钮时页面执行某些操作，但由于它对表进行排序，它会破坏应该发生的事情。另外，在传递给draw方法的opts对象中，我确实排序了＆＃39;设置为＆＃39;事件＆＃39;就像他们在文档中说的那样，但它不起作用。该函数运行，但无论我在函数中有什么，表仍然排序。任何帮助都会非常感激。谢谢大家。

Answer 1

如果您想完全控制排序，请将sort: 'event'添加到configuration options

请注意，您现在已掌控，因此您必须手动对数据进行排序 sortAscending和sortColumn选项用于设置列标题中的排序箭头。

在此示例中，数据最初按降序小时排序，在初始绘制时相应地设置选项。

然后在排序事件中，我只允许按小时排序......

＆＃13;

google.load("visualization", "1", {packages:["table"], callback: loadChart});

function loadChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('number', 'Hours');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, 40],
    ['Jim',   {v:8000,   f: '$8,000'},  30],
    ['Alice', {v: 12500, f: '$12,500'}, 20],
    ['Bob',   {v: 7000,  f: '$7,000'},  10]
  ]);

  var chart = new google.visualization.Table(document.getElementById('table_div'));
  var options = {
    sort: 'event',
    sortAscending: false,
    sortColumn: 2
  };

  google.visualization.events.addListener(chart, 'sort', function(e) {
    if (e.column === 2) {
      options.sortAscending = e.ascending;
      options.sortColumn = e.column;
      data.sort([{
        column: e.column,
        desc: !e.ascending
      }]);       
      chart.draw(data, options);
    }
  });
  
  chart.draw(data, options);
}

＆＃13;

<script src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>

＆＃13;

即使我定义了自己的功能，Google可视化表也会排序

1 个答案: