Sorting Trees

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:

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