JS dynamically build a directory tree

JS dynamically build a directory tree

When using the frameset layout, we often use the directory tree, we can write a tree to die, but more of the situation is that the tree needs to be changed at any time, so we expect that he can be dynamically built.

MVC, to be understood a little, that this article will take this tree according to M-v-c to break apart.

Click the link demo→

Let's see how this tree is built.

　

Module [Data layer]

var tree = {            "id": 0,            "A1": {                "id": 1,                "name": "A1",                "Children": {                    "B1": "B1_1",                    "B2": "B1_2 ",                    " B3 ":" B1_3 "                }               ,            " 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-level directory tree, with the ID to represent the hierarchical relationship, name to represent the name of the change layer (that is, the node text content bar).

control [controlling layer]

var Tree = function (module) {function createnodelist (obj) {//Create UL node and Documentfragmeng Intermediate variable var n = do        Cument.createelement ("ul"), Docfrag = Document.createdocumentfragment ();            Determine if obj is the root node or the child node if (obj.id = = 0) {N.setattribute ("Class", "Tree_0");                for (var key in obj) {if (key = = "id") continue;                Insert the node 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 node into var c = Document.createelemenT ("Li");                    C.appendchild (document.createTextNode (Obj.children[item));                Docfrag.appendchild (c);        }}} n.appendchild (Docfrag);    Returns the UL node that started building return n; }//Hide and Show tool functions 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 (obj[key] = = "id" | |!obj[key].children) continue;            Child = Createnodelist (Obj[key]);            Root.children[count].appendchild (child);        Count to determine the position of the insertion 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;}

There are three functions created on this side, where

Createnodelist ()//For building a tree sub-node

The use of DocumentFragment as a node buffer, first put the node into the documentfragment, and then uniformly inserted into the UL, which is a more commonly used way.

Createtree ()//Build a tree

The construction of the basic whole tree is divided into these two steps, the former is responsible for creating a child node, the latter building a tree.

By binding the Click event in this tree so that it can be collapsed and, of course, you can bind more methods in this class of trees, this is on your own.

View [views Layer]

Window.onload = function () {    var T = new Tree;    document.getElementsByTagName ("Body") [0].appendchild (T);}

The construction of the whole tree, the main use of the DOM element processing, this must be firmly mastered!

JS dynamically build a directory tree