Sorting Trees
From MozillaZine Knowledge Base
Sorting Trees
The following example explains how to use tables as datasources for trees and how to sort columns based on header clicks.
This example applies to Trees in tabular form with custom views.
TODO:
Example
treesort.xul
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window title ="TreeSort" height="440px" width ="540px" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="treesort.js" /> <tree id="treedata" flex="1" seltype="single"> <treecols> <treecol id="col0" flex="1" label="#" onclick="sortcolumn(this);" /> <treecol id="col1" flex="3" label="Name" onclick="sortcolumn(this);" /> <treecol id="col2" flex="1" label="Age" onclick="sortcolumn(this);" /> <treecol id="col3" flex="2" label="Birthday" onclick="sortcolumn(this);" /> </treecols> <treechildren id="treeitems"> <!-- datatable --> </treechildren> </tree> </window>
treesort.js
// A table is a 2D array var datatable = [ [1, 'Britney' , 22, '1983/04/11'], [2, 'Jenna' , 35, '1970/03/24'], [3, 'Avril' , 21, '1984/01/31'], [4, 'Christina', 19, '1986/02/10'], [5, 'Beyonce' , 26, '1979/02/11'], [6, 'Jennifer' , 28, '1977/04/01'], [7, 'Jessica' , 26, '1979/03/22'] ]; // colName:[index, order, isnumber] var datacols = {col0:[0,0,1],col1:[1,0,0],col2:[2,0,1],col3:[3,0,0]}; var rowcount = 7; function init() { loaddata(); } function loaddata() { // assign our custom treeview var tree = document.getElementById('treedata'); tree.view = new treeView(datatable,datacols,rowcount); } // This function will be called everitime we click on a column header function sortcolumn(column) { var tree = document.getElementById("treedata"); var name = column.getAttribute("id"); var index = datacols[name][0]; var order = datacols[name][1]; var isnum = datacols[name][2]; datacols[name][1] = (order==0)?1:0; // switch order flag tableSort(datatable,index,order,isnum); // sort the table tree.view = new treeView(datatable,datacols,rowcount); // bind to tree } // This is the actual sorting method, extending the array.sort() method function tableSort(table,col,order,isnum) { if(isnum){ /* use numeric comparison */ if(order==0){ /* ascending */ function columnSort(a,b){ return (a[col]-b[col]); } } else{ /* descending */ function columnSort(a,b){ return (b[col]-a[col]); } } } else{ /* use string comparison */ if(order==0){ /* ascending */ function columnSort(a,b){ return (a[col]<b[col])?-1:(a[col]>b[col])?1:0; } } else{ /* descending */ function columnSort(a,b){ return (a[col]>b[col])?-1:(a[col]<b[col])?1:0; } } } // use array.sort(comparer) method table.sort(columnSort); } // This is our custom view, based on the treeview interface function treeView(table,columns,rowcount) { this.table = table; // our table this.columns = columns; // our cols this.rowCount = rowcount; // our counter this.getCellText = function(row,column){ return this.table[row][this.columns[column][0]]; }; this.setTree = function(treebox){ this.treebox=treebox; }; this.isContainer = function(row){ return false; }; this.isSeparator = function(row){ return false; }; this.isSorted = function(row){ return false; }; this.getLevel = function(row){ return 0; }; this.getImageSrc = function(row,col){ return null; }; this.getRowProperties = function(row,props){}; this.getCellProperties = function(row,col,props){}; this.getColumnProperties = function(colid,col,props){}; }