Use and extension of dtree

I believe there are not many children's boots that have used dtree. There are many JS trees circulating on the Internet, such as the snowflake tree mztreeview. After ext and struts2 are released, they also have their own tree controls, but among the shadows with so many excellent styles, I love dtree. There are two reasons: 1. Easy to use, can meet basic needs 2. Simple code, easy to expand. It's just like looking for mm. It's simple and silly. If you want to guess the complexity, let her depend on her side. If you can't grasp the beauty, you can't do anything better. Haha, it's a long journey.
Let's get down to the truth first.Basic use of dtree. Step 1: reference the dtree resources and reference the dtree JS file and CSS style file in your page file head tag. For example, my code is as follows:

<link href="/css/dtree.css" rel="stylesheet" type="text/css" /> <script src="/js/dtree.js" type="text/javascript"></script>

Step 2: define and display the tree. Dtree can usually be placed in a div. to display the tree in your page file, add the following code:

<Div class = "dtree"> <SCRIPT type = "text/JavaScript">/* 1. define a tree object */var d = new dtree ('D'); // create a root node with ID equal to-1, invisible/* 2. add a level-1 node */d. add ("0", "-1", "All classes"); // here-1 is the ID of the previous root node, it indicates that the newly added node is the direct subnode of D/* adding other nodes cyclically * // * 3. parameter description: 1.id 2. parent ID 3. name 4.url 5. hotspot Tip 6. the URL displays the Target 7. icon 8 when the node is closed. icon 9 when the node is opened. determine whether the node is open */<C: foreach items = "$ {userlogsortlist}" Var = "treenode"> D. add ("$ {treenode. sortid} "," $ {treenode. parentid} "," $ {treenode. sortname} "," $ {treenode. URL} "," $ {treenode. sortname} "," loglist "); </C: foreach>/* 4. the written Div shows */document. write (d); </SCRIPT> </div>

For the previous code, a brief description is provided. Steps 1 to 3 in the comment are the definitions of each node in the tree, and comment 4 is the final display of the tree to the page, here, the El loop and expression are used in the code in steps 1 to 3. Don't explain what El is ?! If you do not want to use the default dtree node close and open icons, you can also enter your desired icon path in the 7th and 8th parameters of the add function.

Well, it's easy. Of course, you need to prepare the data for the tree in the background, which cannot be avoided for the tree control. However, in actual use, there may be deficiencies in the dtree, and some application scenarios cannot meet our needs. Therefore, it is necessary to expand the dtree. This is like loving, and we will keep making progress on our own, make yourself better, and try to show the best side to each other. I think if the dtree is spiritual, she also hopes so. However, in the process of approaching perfection, we need to take appropriate methods based on our actual situation. Otherwise, it is counterproductive, so we need to firstUnderstanding dtreeOpen your dtree. js file and let us feel the heart of the dtree, just like the tacit understanding between the feeling and the lover. Some things are superfluous.
Dtree. js mainly has the following functions:
1. node definition function: function node (ID, PID, name, URL, title, target, icon, iconopen, open)
In the function, the "_ is" attribute indicates whether the node is selected, the "_ ls" attribute indicates whether it is the last sibling node, the "_ HC" attribute indicates whether there are subnodes, and the "_ p" attribute indicates the parent node.

2. Tree object definition function: function dtree (objname ):
After the function is completed, the function is described as follows: A. Global configuration information of the definition Tree B. Default icon of the definition tree C. Create the tree object and root node. function 1 is called when the root node is created.

3. node addition function: dtree. prototype. add = function (ID, PID, name, URL, title, target, icon, iconopen, open) actually calls function 1 to define node attributes, add the node to the tree object's anodes node array.

4. dtree. Prototype. node = function (node, nodeid)
Create a node icon, URL (expand and close the function to a non-last node), and display text based on the definition.

5. dtree. Prototype. addnode = function (pnode)
Function 4 is called to build the structure model that the tree shows for the first time according to the definition.

6. dtree. Prototype. tostring = function ()
Call functions 4 and 5, and the stringized dtree is displayed in the page Div.

The above functions 1 to 3 are called when the steps defined in the previous Code are used. functions 4 to 5 are called when the steps of the tree are displayed in the previous Code. These are the most important functions,
It is the essence of the idea of dtree. The others are event-triggered functions. You can also use dtree. js as an introductory textbook to learn prototype.

After learning about dtree, let's talk about expansion.The first requirement is to add the checkbox button for the dtree.I think this is what many children's boots want. There are already many such examples on the Internet, so I will pay for them and give them money.

Step 1: change function 1 header to function node (ID, PID, name, URL, title, target, icon, iconopen, open, checked, isbottom ), add the following code to the function body:

this.checked=checked; this.isBottom=isBottom;

 

Step 2: Add the following code to the config information of function 2:

check: false , useAllData: false 

 

Here, the usealldata attribute and related Code may not be what you want, but I listed them together.

Step 3: Modify the function body of function 3 as follows:

var node = new Node(id, pid, name, url, title, target, icon, iconOpen, open, checked,isBottom);this.aNodes[this.aNodes.length] = node;var n;var len = this.aNodes.length; if ( node.checked ){ var pid = node.pid; var bSearch; do{ bSearch = false; for( n = 0; n < len; n++){ if ( this.aNodes[n].id == pid){ if (this.aNodes[n].checked == false){this.aNodes[n].checked=true; pid = this.aNodes[n].pid; bSearch= true; break;} } } }while(bSearch==true);}

 

The role of the next two loops is to change the definition of the selection status of the parent node when a node is selected.

Step 4: Add the following code to the code segment for creating a graph in function 4. This code is used to build the node checkbox icon and to select the trigger function for the node associated checkbox:

if(this.config.check == true){ if(node.checked ==true){ str+= ‘<input type="checkbox" id="c‘+ this.obj + nodeId + ‘" value="‘+ node.id +‘" ‘;if (this.config.useAllData) { str+= ‘ name="dataId" ‘; }if (!this.config.useAllData) { str+= node.isBottom ? ‘ name="dataId" ‘:‘ name="nodeId"‘; }str+= ‘ onclick="javascript:‘+this.obj+‘.cc(‘+nodeId+‘)" checked />‘;}else{str+= ‘<input type="checkbox" id="c‘+ this.obj + nodeId + ‘" value="‘+ node.id +‘" ‘;if (this.config.useAllData) { str+= ‘ name="dataId" ‘; }if (!this.config.useAllData) { str+= node.isBottom ? ‘ name="dataId" ‘:‘ name="nodeId"‘; }str+= ‘ onclick="javascript:‘+this.obj+‘.cc(‘+nodeId+‘)" />‘;} }

 

Step 5: Add a new function, that is, the CC function in Step 4, to change the checkbox status of the corresponding ancestor node and descendant node when the status of the checkbox check of A Single Node changes, as shown below:

dTree.prototype.cc=function(nodeId){ var cs = document.getElementById("c"+this.obj+nodeId).checked; var n,node = this.aNodes[nodeId]; var len =this.aNodes.length;for (n=0; n<len; n++) {if (this.aNodes[n].pid == node.id) { document.getElementById("c"+this.obj+n).checked=cs; this.cc(n); }}if (cs ==f alse){ var clicknode=node do{for( j=0; j<l en; j++){ if(this.aNodes[j].pid==clicknode.pid&&document.getElementById ("c"+this.obj+j).checked==true){ return; }}if ( j == len) { for(k=0;k<len;k++){ if (this.aNodes[k].id == clicknode.pid ){ document.getElementById("c"+this.obj+k).checked=false; clicknode=this.aNodes[k]; break; } } }}while(clicknode.pid!=-1);}if(cs==true){ var pid=node.pid; var bSearch; do{ bSearch=false; for(n=0;n<len;n++){ if (this.aNodes[n].id == pid ){ document.getElementById("c"+this.obj+n).checked = true; pid = this.aNodes[n].pid; bSearch = true; break; } } }while(bSearch==true);}}

 

It is a little troublesome, but when I see the checkbox, I think you will have a sense of accomplishment, just as you have gone through the hardships to catch up with your favorite girl.

ConclusionThe second requirement for expansion is to add external JS function calls to the last node.External JS functions are reserved for children's boots to implement during use. In this way, children's boots can outsource JS functions to customize other tree-related business actions, or even asynchronous calls, implement the refreshing effect of Ajax. The specific extension method is to add another branch in the Code for determining the URL in function 4. The Code is as follows:

else if ((!this.config.folderLinks || !node.url) && !node._hc && node.pid != this.root.id){str += ‘<a href="javascript: ‘ + this.obj + ‘treeNodeClick(‘ + node.id + ‘);" class="node">‘;}

 

Use and extension of dtree