Unlimited level tree implemented by Treeview (background) and JavaScript (foreground)

There is such a table in the database (common region selection will also be similar structure), mainly including ID, name, parentid,

In order to achieve the effect of an infinite Layer tree, how can we present such a tree? The preceding and background methods are used for implementation.

1. Bind the backend to the Treeview to implement an infinite number of trees.

　　

View code

1 protected void page_load (Object sender, eventargs E) 2 {3 cinemagroupbll BLL = new cinemagroupbll (); 4 5 bindtreeview (BLL. getallgroup (), treeview1.nodes, "0"); 6} 7 8 9 // bind list 10 private void bindtreeview (datatable, treenodecollection treenodes, string parentid) 11 {12 dataview = new dataview (datatable); 13 treenode node; 14 dataview. rowfilter = "parentid =" + "'" + parentid + "'"; 15 dataview. sort = "sortnum DESC"; 16 foreach (datarowview in dataview) 17 {18 node = new treenode (); 19 node. TEXT = datarowview ["groupname"]. tostring (); 20 21 treenodes. add (node); 22 bindtreeview (datatable, node. childnodes, datarowview ["groupid"]. tostring (); 23} 24}

 

2. Obtain JSON data in the specified format through the foreground, and splice the data to form a tree layer.

View code

<SCRIPT type = "text/JavaScript"> var temp = [{'id': 1, 'name': 'hq ', 'parentid': 0 }, {'id': 2, 'name': 'wuhan branch ', 'parentid': 1}, {'id': 3, 'name': 'Beijing branch ', 'parentid': 1}, {'id': 4, 'name': 'wuhan cinema 1', 'parentid': 2}, {'id': 5, 'name': 'group', 'parentid': 4}, {'id': 6, 'name': 'mcdonald ', 'parentid': 5 }, {'id': 6, 'name': 'Beijing XX cinema ', 'parentid': 3}]; $ (function () {var arr = ['']; createtree (temp, arr, 0); var STR = arr. join (''); // remove null <ul> </ul> STR = Str. replace (/<ul> \ s * <\/ul>/g, ''); values ('{treediv'{.html (STR) ;}); // recursive tree creation function createtree (JSON, arrhtml, parnetid) {If (JSON = NULL | JSON. length <1) {return;} arrhtml. push ('<ul>'); For (VAR I = 0, Len = JSON. length; I <Len; I ++) {If (parnetid = JSON [I] ['parentid']) {arrhtml. push ('<li>' + JSON [I] ['name'] + '</LI>'); arrhtml. push ('<ul>'); For (var j = 0, Len = JSON. length; j <Len; j ++) {If (JSON [I] ['id'] = JSON [J] ['parentid']) {arrhtml. push ('<li>' + JSON [J] ['name'] + '</LI>'); createtree (JSON, arrhtml, JSON [J] ['id']);} arrhtml. push ('</ul>');} arrhtml. push ('</ul>');} </SCRIPT>

JS implementation: