Datentabelle nach Spalte neu anordnen

Question

Ich frage mich, ob es eine bekannte Möglichkeit gibt, effizient eine "Reorder" -Funktion zu meinen Daten in dc.js hinzuzufügen. Es wäre großartig, wenn meine Benutzer, nachdem sie ihre Auswahl mit den Charts getroffen haben, entscheiden könnten, in welcher Spalte die gefilterten Zeilen angeordnet werden sollen (indem man beispielsweise auf den Spaltenkopf klickt).

Irgendwelche Ideen, wo ich anfangen soll?

Vielen Dank

Answer 1

Ich mag diese JQuery Datentabellen für verwenden: http://datatables.net/

zuerst die Tabelle hinzufügen und die Kopfzeile:

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

Weiter Ihre Dimensionen wie normale bauen:

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

Dann binden Sie die jquery Datentabelle:

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

Schließlich ist es in dc.js Haken, wenn Sie die Tabelle wollen die Filter Ihrer anderen Diagrammen zu reflektieren:

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

Hier ist ein jsFiddle, das diesen zeigt: Hier http://jsfiddle.net/djmartin_umich/d55My/

Answer 2

ist eine andere Tabellensortiermethode, die nur Standard-jQuery und dc.js verwendet

Definieren Sie Ihre Tabelle HTML mit Spaltenüberschriften.

<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> 

Die DC.js-Datentabelle einrichten. Die einzige wichtige Sache ist die Spaltenkonfiguration. Verwenden Sie das Format, das nicht dynamisch Header erstellen ist

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

Befestigen Sie dann nur einen Click-Ereignishandler die Spaltenüberschriften und verwenden dc.js die Tabelle zu sortieren. Bearbeiten - Sie müssen auch die Dimension ändern, so dass die sortBy alle Daten sortiert, nicht nur Daten angezeigt

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