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.
First the XUL code, nothing fancy just a simple tree with four columns.
No items will be defined here, they will be attached to the tree in JS code.
The only thing to note is the binding of the click event of the columns to the sort method:
onclick="sortcolumn(this);"
Now, to the javascript magic:
We will use a 2D array as our table.
Custom tree views can use 2D arrays easily.
Example
Source Code
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; // Window OnLoad function init() { loaddata(); } // Assign our custom treeview function loaddata() { var tree = document.getElementById('treedata'); tree.view = new treeView(datatable,datacols,rowcount); } // This function will be called everytime 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){}; }