Sorting Trees: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
Line 6: Line 6:


===Example===
===Example===
'''treesort.xul'''
<pre>
<pre>
Code follows
<?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>
TODO:
</pre>
</pre>


[[Category:Example code|Sorting Trees]]
[[Category:Example code|Sorting Trees]]

Revision as of 19:59, 17 April 2005

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: