Click here to Skip to main content
11,492,639 members (62,171 online)
Click here to Skip to main content

JScript Tree List Control with Resizable Columns

, 4 Oct 2002 127.5K 2.1K 52
Rate this:
Please Sign up or sign in to vote.
A tree list control written using CSS and JScript. Resizable columns!
<!-- Download Links --> <!-- Article image -->

Sample Image - jstreelistcontrol.gif

<!-- Add the rest of your HTML here -->

Introduction

Note: this code requires internet explorer 5.5 or better.

Following up on a tree list control I made using JScript and ASP (article here), I have created a new one which requires no ASP at all. It is not very fast in adding a whole lot of nodes at once, but expanding and contracting a node is instantaneous. Hovering over text in a row will cause the node for that row to highlight, making it easier to determine which node you are looking at.

Usage:

Create an instance of the tree:

var myTree = new TreeListControl("myUniqueID");
Add the columns:
myTree.addColumn([column name], [width], [alignment]);
Create the tree, specifying the parent element:
myTree.createIn(document.body);
Add Nodes:
myTree.addNode([parent ID], [relative path to icon], [expand branch?], 
                [column text 1], ..., [column text n]);
Delete a Node:
myTree.deleteNode([node ID]);

API

Methods:

TreeListControl ( strID )

Each instance of the tree must have its own unique identifier. This will become the .id property of the element, and is used in id assignment for all the nodes.

TreeListControl . addColumn ( strTitle[, [intWidth[, strAlign]]] )

Adds a column to the tree. This must be done before the createIn() method of TreeListControl is called.

TreeListControl . createIn ( objContainerElement )

This builds the main tree object and appends it to the object passed in.

TreeListControl . addNode ( intParentID, strIconSrc, boolExpandChildren, strColumnText1, ..., strColumnTextN )

Used to add an entry in the tree. The return value is the integer ID value for that node, which can be used to reference that node later if desired. First supply the parent ID for the node you are adding (0 or null if there is no parent), then a path to the icon to be used, then true/false depending on whether you want this branch to be collapsed or expanded, then the text for each column. If you use the string [[id]] in the text for the columns, it will be replaced with the actual id number that node is assigned. Also, if a node is added, and the specified parent does not exist, it will be queued and added when the parent id is added to the tree.

TreeListControl . setText ( intNodeID, intColumnIndex, strText )

Changes a node's text in the specified column. If you use the string [[id]] in the text for the columns, it will be replaced with the actual id number that node is assigned.

TreeListControl . deleteNode ( intNodeID )

Deletes the specified node and all its children.

TreeListControl . deleteAllChildren ( intNodeID )

Deletes all the children of the specified node, but not the node itself.

TreeListControl . redrawAllIcons ( )

Forces the tree to redraw all the line connection images that make the tree look correct. This must be called if nodes have been added while the property autoRedrawIcons was set to false.

Properties:

TreeListControl . autoRedrawIcons

When a new node is added, this determines whether or not to recalculate which line connector images to draw so that the tree looks correct. If you are adding a whole bunch of nodes at once, set this to false, add the nodes, then set it to true. This should speed up the operation.

Example usage

function addone(parentid) {
    var opt = "[ Delete";
    opt += " | Add Child ]"
    var newid = xx.addNode(parentid,
                xx.pathtoicons+"icon_folder.gif", //the icon to use
                true, //expand this node's children?
                s[Math.floor(Math.random()*s.length)], //value for column 1
                s[Math.floor(Math.random()*s.length)], //value for column 2
                s[Math.floor(Math.random()*s.length)], //value for column 3
                s[Math.floor(Math.random()*s.length)], //value for column 4
                opt); //value for column 4
}

xx = new TreeListControl("tlc1"); //create an instance of the control 
                                  // and specify its unique identifier string
xx.autoRedrawIcons = false;       //don't calculate the icons until we've added
                                  // all the nodes (faster this way)
xx.pathtoicons = "treelistcontrol/treeicons/"; //specify the path to the tree 
                                               // icons
xx.addColumn("Things",250) //add some columns (label, width, alignment)
xx.addColumn("More Things",150)
xx.addColumn("Interesting Things",150)
xx.addColumn("Other Things",150)
xx.addColumn("Options",null,"right") //the last column should not have a width

xx.createIn(document.body); // create the tree, passing in the container object
                            //to generate the tree inside

s = new Array("yay","cool","wonderful","great","awesome","fluff",
              "green","beans","mean","machine", "high","balloons",
              "flying","for","fun","great","happy",
              "apples and cherries","bump"); //make some random text values
for(var z=0; z<50; z++){
    addone(Math.floor(Math.random()*z));
}

xx.autoRedrawIcons = true; //remember to set this back to true so that future 
                           //nodes added will be drawn correctly
xx.redrawAllIcons(); //since no icons were drawn, redraw all of them

History

5 Oct 2002 - Updated source code

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Nathan Ridley
Web Developer
Australia Australia
Web application developer, graphic designer, aspiring entrepreneur, snowboarder and electronic music afficianado.


Comments and Discussions

 
QuestionCan't Print if the page more than one page Pin
erros2218-May-09 21:06
membererros2218-May-09 21:06 
GeneralWow ! Pin
satsat19-Mar-07 14:55
membersatsat19-Mar-07 14:55 
Questionresizing problem Pin
microturk30-Jul-06 5:05
membermicroturk30-Jul-06 5:05 
Generaltree binding Pin
sunilmskr6-May-05 3:17
membersunilmskr6-May-05 3:17 
GeneralTree lIst control rows get invisible problem Pin
Sunil Baheti8-Jan-04 21:57
sussSunil Baheti8-Jan-04 21:57 
GeneralWonderful control Pin
rstgp29-Oct-03 23:25
memberrstgp29-Oct-03 23:25 
GeneralError with createIn(document.body) function Pin
Anonymous29-May-03 14:54
sussAnonymous29-May-03 14:54 
GeneralRe: Error with createIn(document.body) function Pin
Nathan Ridley29-May-03 20:04
memberNathan Ridley29-May-03 20:04 
GeneralWow...and suggestions ...of course...;-) Pin
SkyII28-Oct-02 12:02
sussSkyII28-Oct-02 12:02 
GeneralRe: More thoughts (after looking at the code). Pin
SkyII29-Oct-02 8:13
sussSkyII29-Oct-02 8:13 
GeneralRe: More thoughts (after looking at the code). Pin
Nathan Ridley29-Oct-02 11:23
memberNathan Ridley29-Oct-02 11:23 
GeneralAnother suggestion Pin
ashman_webdev7-Oct-02 20:23
memberashman_webdev7-Oct-02 20:23 
GeneralRe: Another suggestion Pin
Nathan Ridley8-Oct-02 1:12
memberNathan Ridley8-Oct-02 1:12 
GeneralAwesome work ! Pin
Ranjeet Chakraborty3-Oct-02 11:14
memberRanjeet Chakraborty3-Oct-02 11:14 
GeneralWow! Pin
Megan Forbes24-Sep-02 10:13
memberMegan Forbes24-Sep-02 10:13 
GeneralX-browser Pin
Martrix10124-Sep-02 1:00
memberMartrix10124-Sep-02 1:00 
GeneralRe: X-browser Pin
Nathan Ridley24-Sep-02 14:09
memberNathan Ridley24-Sep-02 14:09 
GeneralRe: X-browser Pin
Anonymous26-Sep-02 10:20
sussAnonymous26-Sep-02 10:20 
GeneralRe: X-browser Pin
Daniel Turini3-Oct-02 6:34
memberDaniel Turini3-Oct-02 6:34 
GeneralRe: X-browser Pin
Dave Comer15-Oct-03 7:02
sussDave Comer15-Oct-03 7:02 
GeneralRe: X-browser Pin
Nathan Ridley15-Oct-03 15:05
memberNathan Ridley15-Oct-03 15:05 
GeneralExcellent! Pin
Philip Patrick22-Sep-02 23:15
memberPhilip Patrick22-Sep-02 23:15 
GeneralImpressed Pin
Paul Watson19-Sep-02 22:14
sitebuilderPaul Watson19-Sep-02 22:14 
GeneralRe: Impressed Pin
Nathan Ridley22-Sep-02 18:45
memberNathan Ridley22-Sep-02 18:45 
GeneralSuggestion Pin
Eric Lacroix19-Sep-02 18:00
memberEric Lacroix19-Sep-02 18:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 5 Oct 2002
Article Copyright 2002 by Nathan Ridley
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid