Sorting Trees: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(rewrote it based on what i do at mdc)
 
(19 intermediate revisions by 4 users not shown)
Line 1: Line 1:
==Sorting Trees==
See [http://developer.mozilla.org/en/docs/Sorting_and_filtering_a_custom_tree_view Sorting and filtering a custom tree view] at [http://developer.mozilla.org MDC].
<p>The following example explains how to use tables as datasources for trees and how to sort columns based on header clicks.</p>
<p>This example applies to Trees in tabular form with custom views.</p>
<br/>
<p>TODO:</p>
 
===Example===
==treesort.xul==
<pre>
<?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>
</pre>
 
==treesort.js==
<pre>
// 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){};
}
</pre>
 
[[Category:Example code|Sorting Trees]]

Latest revision as of 19:49, 25 May 2007