|
|
(8 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>
| |
| <p>First the [http://kb.mozillazine.org/Sorting_Trees#treesort.xul 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 [http://kb.mozillazine.org/Sorting_Trees#treesort.js 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:<br/>
| |
| We will use a 2D array as our table. Custom tree views can use 2D arrays easily:</p>
| |
| <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']
| |
| ];
| |
| </pre>
| |
| <p>Now, for our convenience, we will define the columns in another array where we can keep track of their sort order and their type whether numeric or string:</p>
| |
| <pre>
| |
| // colName:[index, order, isnumber]
| |
| var datacols = {col0:[0,0,1],col1:[1,0,0],col2:[2,0,1],col3:[3,0,0]};
| |
| </pre>
| |
| <p>Finally, we will put everything together and bind the table to our custom treeview and to the tree.</p>
| |
| <pre>
| |
| var tree = document.getElementById('treedata');
| |
| tree.view = new treeView(datatable,datacols,rowcount);
| |
| </pre>
| |
| <p>
| |
| For more in-depth analisys please refer to:<br/>
| |
| - The sort method explained. (TODO: link)<br/>
| |
| - The treeview interface explained. (TODO: link)
| |
| </p>
| |
| | |
| ==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>
| |
| | |
| ===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;
| |
| | |
| // Window OnLoad
| |
| function init()
| |
| {
| |
| loaddata();
| |
| }
| |
| | |
| // Assign our custom treeview
| |
| function loaddata()
| |
| {
| |
| var tree = document.getElementById('treedata');
| |
| tree.view = new treeView(datatable,datacols,rowcount);
| |
| }
| |
| | |
| // This function will be called everytime 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]]
| |