How to build a directory tree dynamically using JS
This article is about how to use JS to dynamically build a directory tree, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.
Directory trees are often used when using frameset layouts. We can write a tree to death, but more often, the tree needs to be changed at any time, so we expect it to be built dynamically.
MVC, you can understand a little bit, so let's take this tree apart and decompose it according to M-V-C.
Let's take a look at how this tree is built.
Module [data layer] var tree = {"id": 0, "A1": {"id": 1, "name": "A1", "children": {"b1": "b1room1", "b2": "b1room2" "b3": "b1y3"}}, "a2": {"id": 1, "name": "a2", "children": {}}, "a3": {"id": 1 "name": "A3", "children": {"b1": "b3 # 1", "b2": "b3 # 2", "b3": "b3 # 3"}
This is a two-tier directory tree, using ID to represent the hierarchical relationship, and name to indicate the name of the changed layer (that is, node Text content).
Control [control layer] var Tree = function (module) {function createNodeList (obj) {/ / create ul node and documentFragmeng intermediate variables var n = document.createElement ("ul"), docfrag = document.createDocumentFragment (); / / determine whether obj is root node or child node if (obj.id = = 0) {n.setAttribute ("class", "tree_0") For (var key in obj) {if (key = = "id") continue; / / insert nodes into var c = document.createElement ("li"), span = document.createElement ("span"); span.appendChild (document.createTextNode (obj [key] .name)); c.appendChild (span) Docfrag.appendChild (c);}} else if (obj.id & & obj.id = = 1) {n.setAttribute ("class", "tree_1"); for (var key in obj) {if (key = = "id" | | key = = "name" | |! obj.children) continue For (var item in obj.children) {/ / insert nodes into var c = document.createElement ("li"); c.appendChild (document.createTextNode (obj.children [item])); docfrag.appendChild (c) } n.appendChild (docfrag); / / returns the ul node return n that started the construction;} / / hides and shows the utility function function toggle (c) {c.style.display = ((c.style.display = = "none")? ":" none ") } function createTree (obj) {var root, child, count = 0; root = createNodeList (obj); for (var key in obj) {if (objkey] = = "id" | |! obj.children) continue; child = createNodeList (objkey); root.children.appendChild (child) / / count to determine the insertion position count++;} return root;} var T = createTree (module); var list = T.children.for (var I = 0, len = list.length; I < len; I +) {list [I] .getElementsByTagName ("span") [0] .onclick = function () {var obj = this.nextSibling; toggle (obj) } return T;}
Here you create three functions, of which
CreateNodeList () / / is suitable for building a tree child node
Among them, documentFragment is used as a node buffer, first put the node into documentFragment, and then insert it into ul, which is also a common way of use.
CreateTree () / / build a tree
The basic construction of the whole tree is divided into these two steps, the former is responsible for creating a child node, and the latter is responsible for building a tree.
Bind the click event in this tree to make it collapsible, and of course you can bind more methods in the Tree class, which is on your own.
View [View layer] _ window.onload = function () {var T = new Tree (tree); document.getElementsByTagName ("body") [0] .appendChild (T);}
The construction of the whole tree mainly uses the processing of DOM elements, which must be firmly mastered!
The above is how to use JS to build a directory tree dynamically. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.
