Abstract: This article introduces the design and application of Ailai Javascript directory tree control procedures. For more information, please click here, please download the control program and tutorial, please click here.
Ale Directory Tree Control Program
I used ASP to design the program that generated the directory tree, which is the directory tree of the Open Host system, completed in January 2003, and visited Www.9499.net before this. I have an impression. Today, this directory tree control program method is used in the directory tree control program method. It can be said that it is more difficult, more flexible, which is the most powerful directory tree program. With regard to the functional characteristics of this directory tree, the following points are worth mentioning:
1. Introducing the picture control with the catalog tree control, greatly improves flexibility. This is mainly referred to in the TreeView control of VB6.
Second, the incident handling mechanism is introduced in the control program, enhances the function, and greatly improves the flexibility of use.
Third, providing a large number of object interfaces and methods.
Fourth, there are a variety of methods to add directory tree nodes. There are add methods, addlink methods, and original PathParse methods (used to resolve path lists, and quickly construct the directory tree in the simplest code).
5. The directory tree style is not limited, and the user can design a directory tree that is different, flexible and more variable.
6. Provide a variety of ready-made directory tree templates, users don't have to pay attention to design directory tree patterns, just choose the favorite template, add a tree node, how quickly!
7. The control program can be extended as needed, and the CHECKBOX node extension is available (Alai_Tree_Check.js) is a good example.
I. Overview:
A be lacquered tree control program completely uses object-oriented method design, and the entire program is encapsulated inside, and the directory tree program provides a picture list imageList control (Alai_ImageList ()). Building a directory tree using the Aby Tree Control Program generally follows the following three steps:
First, establish an imagelist instance object and add the picture required to build a directory tree to the control;
Second, create a directory tree control instance, transmit the above imagelist instance object as the first parameter;
Third, call the various objects, methods, add nodes of the directory tree control, and define event handler, etc.
Of course, we have more convenient methods, which is to build a directory tree with existing directory tree template programs, and talk about the template program. I will first understand the three core objects of the directory tree control before establishing the directory tree:
(1) Directory tree control instance object (TREE), as follows:
??? var tree = new alai_tree ()
??? This creates a tree object.
(2) Root object: Tree.Root, you can see that it is a member of Tree, which is no appearance, used to build a node of the first level of the directory tree, the parent object of the first level node ( PARENT.
(3) Node (Node) object, corresponding to a node on the directory tree, as follows:
Var node = tree.add (...) // Add node, parameters will not be discussed
The method of adding a node above, generating a new node object: Node
These three objects each have a lot of members objects (attributes, methods, and events), please check the "Directory Tree Control Object Reference". Take a look at the process of constructing the building directory tree to see
?
II. Sample program:
Var images = new alai_imagelist () // Establish ImageList instance object images.path = "Images /" // Picture Path
Images.add ("file.gif", "default") // Add a picture, the second parameter is the key value (key)
Images.add ("folder") // Add pictures, file suffix ".gif" Province, key value defaults file name: "Folder"
Images.add ("HTML", "LINK")? // Add html.gif, key value is LINK
Var tree1 = new alai_tree (images, 16, divtree1) // Note that Divtree1 is where the directory tree is placed.
// There is such code on the webpage:
The generated directory tree is inserted there.
Var root = tree.root
Var n1 = root.add ("Node 1", "Default", "JS", "Alert ('Node 1')")
// Equivalent code: var n1 = tree1.add (root, "limited", "node one", "n1", "", "js", "alert ('node one')")
/ * The following code demonstrates how many additional nodes * /
VAR N2 = root.add ("Node 2", "Folder")
VAR N23 = N2.Add ("2-3") // Add N2 child node
VAR N22 = Tree1.add (N23, "Prev", "2-2", "N22") // Before adding nodes N22 to N23
VAR N20 = Tree1.Add (N2, "First", "2-0", "N20", "File",) // Due to the "first" parameter, this node is the first child node of N2
VAR N3 = Tree1.Add (root, "limited", "node three", "folder")
VAR N31 = N3.Addlink ("http://www.9499.net") // Add N2 child node
VAR N32 = Tree1.Add (N3, "Last", "WW.9499.NET", "N32", "Page", "URL", "http://www.9499.net") // Add N2 Child node
Var colnode = tree.pathpival ("/ Node 4 / 4-1; / Node 4 / 4-2; / Node 4 / 4-3; / Node 5 /")
VAR N4 = root.addlink ("http://www.9499.net", "Welcome to 9499.net")
Iii. How to add nodes:
In the example above, we have contacted five ways to add directory tree nodes, first look at their syntax prototype:
1.Tree.Add (Tonode, Relation, Text, Key, ICO, Execategory, Exearg)
2.Root.Add (Text, ICO, Execategory, Exearg)
3.Root.Addlink (URL, Text, Target, ICO)
4.Node.Add (Text, Ico, Execategory, Exearg) 5.Node.Addlink (URL, Text, Target, ICO)
6.Tree.PathParse (Path, PathseParetor, ListSeparator)
Method 1 The function is most comprehensive, covering methods 2-5, but part of the parameters are rarely used, so more or methods 2-5. The ADD method of the root object always adds the first level of nodes, and the Node Node object's add method is used to add the child node of the node. The AddLink method makes it easy for us to add a node with the URL link. The PATHPARSE method can explain a path list to generate a corresponding tree structure. Description of each parameter, please see the reference for the directory tree control object.
?
IV. Node relationship:
??? A be laid-tree control program has a clear logical expression for the tree structure, which is manifested in the following relationships of the tree node object:
Node.first - The first child node of the node, if there is no child node, NULL
Node.last - Node's last child node, if there is no child node, NULL
Node.next - Node next neighboring child node, if node is the last node on this layer, NULL
Node.PREV - Node's adjacent child node, if node is the first node on this layer, NULL
Node.Parent - parent node of the node
Node.chidren - child node (it is a collection array, the first element is a node object)
For root object root:
ROOT.First is the first node of the first-level node, root.last is the last node of the first level node, and root.chidren is a collection of first-level nodes, and the first level node is equal to ROOT.
?
V. Members of the Node Object:
The node object Node contains some member objects (attributes), in order to facilitate explanation and understanding, with a diagram to zoom in and launched. as follows:
The object indicated by the number is:
Node.exicon
2.Node.icon
3.Node.label
4.Node.Lineicon [0]
5.Node.Body
6.Node.Container
Vi. Access Node Object:
1. From the example above, we have seen the Add method to return to the newly added node object, give it a variable, and you can access it later.
2. All added nodes are saved in the Tree.Nodes collection array, such as for the first addition of the node:
VAR N0 = Tree1.Add (root, "limited", "node", "node0")
In addition to N0 points to this node, Tree.Nodes [0] also points to this node, and we also specify a key value: "node0", so tree.nodes ["node0"] also points to the node, so N0, Tree .nodes [0] and Tree.Nodes ["Node0"] are all the same object.
3. Methods to perform directory tree nodes: You can start from root.first to be traversed according to node relationships according to node relationships, which is not going on here. If you don't care about the logical structure of the tree, it is:
FOR (var i = 1; i
Maybe you will think of another method:
For (var i = 0; i
It is also possible, but pay attention to if there is a node, the node will be accessed twice! 4. Other methods for obtaining node objects: ??? (1) Tree object method: getNodeByPath, getNodeBytier, getSelectNode, getActiveNode ??? (1) Node object: getSibling, Node Relationship (Next, First, Last, Prev , PARENT, Children VII. Operation: 1. Remove Node: Node.Remove () or Tree.Removenode (Node) 2. Sub-node Expand and Contract: ??? Expand: Node.expand (TRUE), shrink : Node.expand (false), automatic: node.expand () ??? Expand a branch (expand sub-node grandson node): node.expand (true, true) Open All Nodes: Tree.expandall (True ), Shrink all nodes: Tree.expandall (false)? IX to the second layer: Tree.expandtotier (2) ix. ImageList control relationship with the directory tree control: imageList is used to build a directory tree to the directory tree control Various pictures (icons), how do these images are used in directory tree controls? In the method of adding a node, the ICO parameter is used to set the node icon, as the N1 node ICO is "default" in the above example, which is the key value specified when the node is added, in addition to the key value, we can use the index value, because "" DEFAULT "is the first added icon its index value is 0, and it is also possible to use 0 instead of" default ". It can be seen that the directory tree control is to reference the image in the ImageList control by key value (string) or index value (positive integer). We also notice that some nodes are added to the ICO parameter, but the node still has icon displayed, which is another topic to talk about - the reference key value. The convention key value refers to the element with these key values in the ImageList control. There is a special purpose in the directory tree control. The appointment key value has the following: 1. Default - Default icon, use the default icon in the ICO parameter default node , The legend: 2, Expand and Collapse - Control the child node expansion and shrinkage, usage: 3, expand_top, expand_end, collapse_top, collapse_end, providing the first tail different picture legend when using the first set of images above: 4, LEAF and TWIG - icons for indicating leaf nodes and last nodes, ideas: 5, Line and Blank - for painting directory tree branches. Legend: (Blank is a blank picture) 6, LINK - especially for the addLink method, the ICO parameter is used by default, the legend: follow this convention, if you want to display the picture of the control node to expand / shrink, you should Add pictures of Expand and Collapse key values to iMaglist, which is the same as shown in the link to display the branch. If you provide the Default icon and add the node, there is no specified ICO parameter, the Default icon is sent to the field. This is a non-powerful agreement, you can even add any pictures to Imagelight, so that you build a tree without a picture.
It is because this agreed relationship makes the Ara Licattal tree program have super flexibility, you can use a variety of combinations, select a variety of icons to build a variety of directory trees! ?. XI event handling: First, event handling mechanism: Event tree object are: onclick, ondblclick, onmousemove, onmouseover, onmouseout, onmouseup, onmousedown, onkeypress, onkeydown, onkeyup, oncollapse, onexpand, afteradd, onblur, onfocus, onselect node event objects are: onclick, ondblclick, onmouseover, onmouseout, onmousemove, onmousedown, onmouseup, onkeypress, onkeydown, onkeyup, oncollapse, onexpand, onfocus, onblur, onselect event tree object for all nodes in response to respective events, a node object Processing for individual nodes. There is a very important feature: the first parameter of the event handler of the tree object is a node object that triggers the event, and there is no parameters of the event of the node object. We noticed that the event names are almost the same (Tree.AFTERADD event exception), which is performed on the OnClick event: When the mouse click the node, the Node.Onclick event handler will execute if the handler returns the value TRUE, then execute the Tree.onClick event, and vice verses if the Node.Onclick handler return value is false (or no return value), the Tree.Onclcik event will not be executed. Other events are classified, this is the event handling mechanism, a bit of events like the DOM (document object model) (bubble). Adding two parameters for Node Add methods: Execategory and ExEargv are used to set the actions to be performed by nodes, such as: n1 = tree.Root.Add ("Test", "," JS "," Alert ('Hello') ") N2 = Tree.Root.Add (" 9499.net ",", "URL", "http://www.9499.net"), click N1 to pop up "Hello", click N2 to open Website www.9499.net. If the default, the default action is to perform the Expand method expand or shrink the subtitle (if any). Click the action of the node to actually call the node.execute () method, and the action performed by the surface execute () method has dependent on the EXECATEGORY and EXEARGV parameters. The connection between node.execute () and onclick event is this: If the Tree.Onclick event handler returns value true, the node.execute () method will then be called, if the return value is false or no return value, Node.execute () The method will not be executed, which is another aspect of the event processing mechanism. Second, the event handler: Event handler is generally used to control the behavior of the node.
