Sorting Trees

From MozillaZine Knowledge Base
Jump to navigationJump to search

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

TODO: