对 google 可视化 table 进行排序时，如何将两行固定在顶部？

Question

我在 google 可视化 table 中有两行，我想在排序后将其固定在顶部，然后再次绘制 table。我正在使用：

var data = new google.visualization.DataTable();
var table1 = new google.visualization.Table(document.getElementById('my_div'));
var ascendOrDescend = true;
...
data.sort({column: colIndex, desc: ascendOrDescend});
ascendOrDescend = !ascendOrDescend;
table1.draw(data, options);

有没有办法修复这两行，或者在排序后强制它们回到顶部？

Answer 1

为了在排序中固定某一行，
您需要手动控制排序顺序。

要手动控制，在绘制table时设置如下选项。

var options = {
  sort: 'event'
};

table的排序事件将提供用户请求的列和方向
您可以将列和方向传递给数据 table 方法 getSortedRows
这将 return 满足排序条件的行索引数组

// table sort event
google.visualization.events.addListener(table, 'sort', function (sender) {
  // get sorted rows indexes
  var sortIndexes = data.getSortedRows({column: sender.column, desc: !sender.ascending});

我们可以通过将我们想要的行索引移动到顶部来操纵行索引数组
并创建数据视图并使用 setRows 方法提供数据视图应出现的顺序

var view = new google.visualization.DataView(data);
view.setRows(sortIndexes);

为了 table 在正确的列上方显示排序方向箭头，我们设置了以下 table 选项

options.sortAscending = sender.ascending;
options.sortColumn = sender.column;

然后使用新创建的数据视图绘制table

请参阅以下工作片段，
'Michael' 和 'Elisa' 的行将在每次排序后保留在顶部

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Name', 'RoolNumber', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael', 1, 'Male', 12, 5],
    ['Elisa', 2, 'Female', 20, 7],
    ['Robert', 3, 'Male', 7, 3],
    ['John', 4, 'Male', 54, 2],
    ['Jessica', 5, 'Female', 22, 6],
    ['Aaron', 6, 'Male', 3, 1],
    ['Margareth', 7, 'Female', 42, 8],
    ['Miranda', 8, 'Female', 33, 6]
  ]);

  var table = new google.visualization.Table(document.getElementById('table'));
  var options = {
    sort: 'event'
  };

  // table sort event
  google.visualization.events.addListener(table, 'sort', function (sender) {
    // get sorted rows indexes
    var sortIndexes = data.getSortedRows({column: sender.column, desc: !sender.ascending});

    // move values to top
    moveToTop(sender, sortIndexes, 'Elisa');
    moveToTop(sender, sortIndexes, 'Michael');

    // set table sort arrow
    options.sortAscending = sender.ascending;
    options.sortColumn = sender.column;

    // build table view with custom sort
    var view = new google.visualization.DataView(data);
    view.setRows(sortIndexes);

    // draw table with view
    table.draw(view, options);
  });

  // move value to top of sort
  function moveToTop(sender, sortIndexes, value) {
    // find value in current sort
    var fixedRows = data.getFilteredRows([{
      column: 0,
      value: value
    }]);
    if (fixedRows.length > 0) {
      // move value to top
      sortIndexes.splice(sortIndexes.indexOf(fixedRows[0]), 1);
      sortIndexes.unshift(fixedRows[0]);
    }
  }

  // first draw
  table.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table"></div>

对 google 可视化 table 进行排序时，如何将两行固定在顶部？

How to fix two rows at top when sorting a google visualization table?

javascript

sorting

charts

google-visualization