Sorting Trees: Difference between revisions
From MozillaZine Knowledge Base
Jump to navigationJump to search
GeorgeNava (talk | contribs) m (→Example) |
GeorgeNava (talk | contribs) m (→Example) |
||
Line 36: | Line 36: | ||
'''treesort.js''' | '''treesort.js''' | ||
<pre> | <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); | |||
} | |||
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 | |||
} | |||
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); | |||
} | |||
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> | </pre> | ||
[[Category:Example code|Sorting Trees]] | [[Category:Example code|Sorting Trees]] |
Revision as of 20:00, 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
// 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); } 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 } 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); } 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){}; }