crossfilter - 按列重新排序数据表

Question

我想知道是否有任何已知的方法可以有效地将“重新排序”功能添加到我在 dc.js 中的数据表中。如果我的用户在使用图表完成选择后，可以决定根据哪一列对过滤后的行进行排序(例如，通过单击列标题)，那就太好了。

任何想法从哪里开始？

非常感谢

Answer 1

这是另一种仅使用标准 jQuery 和 dc.js 的表格排序方法

使用列标题定义表格 html。

<table id="data-table">
  <thead>
    <th class="data-table-col" data-col="a">Field A</th>
    <th class="data-table-col" data-col="b">Field B</th>
    <th class="data-table-col" data-col="c">Field C</th>
  </thead>
</table>

设置 DC.js 数据表。唯一重要的是列配置。使用不动态创建 header 的格式

var dataDim = xf.dimension(function(d) {return d.a;});
var dataTable = dc.dataTable("#data-table")
  .columns([
    function(d) {
      return d.a;
    },
    function(d) {
      return d.b;
    },
    function(d) {
      return d.c;
    }
  ]);

然后，只需将单击事件处理程序附加到列标题并使用 DC.js 对表格进行排序。编辑 - 您还必须更改维度，以便 sortBy 对所有数据进行排序，而不仅仅是显示的数据

$('#data-table').on('click', '.data-table-col', function() {
  var column = $(this).attr("data-col");
  dataDim.dispose();
  dataDim = xf.dimension(function(d) {return d[column];});
  dataTable.dimension(dataDim)
  dataTable.sortBy(function(d) {
    return d[column];
  });
  dataTable.redraw();
});