|
|
| (15 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>First the XUL code, nothing fancy just a simple tree with four columns.<br/>
| |
| No items will be defined here, they will be attached to the tree in JS code.<br/>
| |
| The only thing to note is the binding of the click event of the columns to the sort method:<br/>
| |
| <code>onclick="sortcolumn(this);"</code>
| |
| </p>
| |
| <p>Now, to the javascript magic:</p>
| |
| <p>We will use a 2D array as our table.<br/>
| |
| Custom tree views can use 2D arrays easily.
| |
| </p>
| |
| | |
| ===Example===
| |
| | |
| ==Source Code==
| |
| | |
| ===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>
| |
