Bootstrap jQuery Ztree asynchronously loads data. check Selects & amp; to add, modify, and delete nodes.

Bootstrap jQuery Ztree asynchronously loads data. check Selects & amp; to add, modify, and delete nodes.

:

I. Download zTree plug-in address: http://www.ztree.me

Ii. html code

 <Script src = ".. /Scripts/zTree/js/jquery-1.4.4.min.js "> </script> <script src = ".. /Scripts/zTree/js/jquery. ztree. core-3.5.js & gt; </script & gt; <script src = ".. /Scripts/zTree/js/jquery. ztree. excheck-3.5.js & gt; </script & gt; <script src = ".. /Scripts/zTree/js/jquery.ztree.exe dit-3.5.js "> </script> <script type =" text/javascript "> var setting = {async: {enable: true, url: ".. /AjaxPage/GetAjax. aspx? Z = sdfww234edfsd ", autoParam: [" ID "], contentType:" application/json ", type:" get ", dataFilter: filter}, view: {expandSpeed :"", addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, selectedMulti: false}, check: {enable: true}, edit: {enable: true}, data: {simpleData: {enable: true }}, callback: {beforeRemove: beforeRemove, beforeRename: beforeRename, }}; function filter (treeId, par EntNode, childNodes) {if (! ChildNodes) return null; for (var I = 0, l = childNodes. length; I <l; I ++) {childNodes [I]. name = childNodes [I]. name. replace (/\. n/g ,'. ');} return childNodes;} function beforeRemove (treeId, treeNode) {var zTree = $. fn. zTree. getZTreeObj ("treeDemo"); zTree. selectNode (treeNode); alert (treeNode. action); // return confirm ("confirm to delete the node --" + treeNode. name +? ");} Function beforeRename (treeId, treeNode, newName) {if (newName. length = 0) {alert (" the node name cannot be blank! "); Return false;} return true;} var newCount = 1; function addHoverDom (treeId, treeNode) {var sObj = $ (" # "+ treeNode. tId + "_ span"); if (treeNode. editNameFlag | $ ("# addBtn _" + treeNode. tId ). length> 0) return; var addStr = ""; sObj. after (addStr); var btn = $ ("# addBtn _" + treeNode. tId); if (btn) btn. bind ("click", function () {var zTree = $. fn. zTree. getZTreeObj ("treeDemo"); zTree. addNodes (treeNode, {id: (treeNode. id + newCount), parentid: treeNode. id, name: "new node" + (newCount ++)}); return false ;}) ;}; function removeHoverDom (treeId, treeNode) {$ ("# addBtn _" + treeNode. tId ). unbind (). remove () ;}; $ (document ). ready (function () {$. fn. zTree. init ($ ("# treeDemo"), setting) ;}); </script> permission menu management                                                                                                                                                    
 
 
                                                                                    

3. ztreestyle.css: Modify the image style of the add node button

 .ztree li span.button.add {                margin-left: 2px;                margin-right: -1px;                background-position: -144px 0;                vertical-align: top;            }

Iv. Background code:

Protected void Page_Load (object sender, EventArgs e) {if (Request. queryString ["z"] = "sdfww234edfsd") {StringBuilder sb = new StringBuilder (); sb. append ("["); sb. append ("{\" id \ ": \" 1 \ ", \" name \ ": \" sales order management \ ", \" pId \": \ "0 \", \ "Action \": \ "list \"}, "); sb. append ("{\" id \ ": \" 2 \ ", \" name \ ": \" sales order list \ ", \" pId \": \ "1 \", \ "Action \": \ "list \"}, "); sb. append ("]"); Response. write (sb. toString ());}}

Note: According to my test, id, name, and pId are three required fields. pId can be seen as parentID. If open is set to true, the next node is displayed.