Изменить порядок данных по столбцу

Мне было интересно, есть ли какой-либо известный способ эффективного добавления функции "Изменить порядок" в мои данные в dc.js. Было бы здорово, если бы мои пользователи, выполнив свой выбор с помощью диаграмм, могли бы решить, в соответствии с тем, какой столбец должны быть упорядочены отфильтрованных строк (например, щелкнув заголовок столбца).

Любые идеи, с чего начать?

Спасибо большое

Ответ 1

Мне нравится использовать JQuery datatables для этого: http://datatables.net/

Сначала добавьте таблицу и строку заголовка:

    <table id="dc-data-table" class="list table table-striped table-bordered">
        <thead>
            <tr>
              <th>Country</th>
              <th>Users</th>
            </tr>
        </thead>
    </table>

Затем постройте свои измерения, как обычно:

    var ndx = crossfilter(data),
        countryDimension = ndx.dimension(function (d) {
            return d.country;
        }),

Затем привяжите таблицу данных jquery:

var datatable = $("#dc-data-table").dataTable({
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": true,
            "bInfo": false,
            "bAutoWidth": false,
            "bDeferRender": true,
            "aaData": countryDimension.top(Infinity),
            "bDestroy": true,
            "aoColumns": [
                { "mData": "country", "sDefaultContent": ""},
                { "mData": "users", "sDefaultContent": " " }
            ]
        });

Наконец, подключите его к dc.js, если вы хотите, чтобы таблица отражала фильтры ваших других диаграмм:

        function RefreshTable() {
            dc.events.trigger(function () {
                alldata = countryDimension.top(Infinity);
                datatable.fnClearTable();
                datatable.fnAddData(alldata);
                datatable.fnDraw();
            });
        }

        for (var i = 0; i < dc.chartRegistry.list().length; i++) {
            var chartI = dc.chartRegistry.list()[i];
            chartI.on("filtered", RefreshTable);
        }

Вот jsFiddle, который демонстрирует это: http://jsfiddle.net/djmartin_umich/d55My/

Ответ 2

Вот еще один метод сортировки таблицы, который использует только стандартные 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. Единственная важная вещь - это конфигурация столбцов. Используйте формат, который не динамически создает заголовки.

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();
});