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

Bootstrap jQuery Ztree asynchronously loads data, check select and add, modify, and delete nodes, and jqueryztree

:

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

Ii. html code

<Link href = ".. /Scripts/zTree/css/zTreeStyle/zTreeStyle.css "rel =" stylesheet "/> <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 = "<span class = 'button add' id = 'addbtn _" + treeNode. tId + "'title = 'add node' onfocus = 'this. blur (); '> </span> "; 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> <div class = "row"> <div class = "col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <div class = "panel-default"> <div class = "panel -heading "> 



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.





How does jquery ztree implement asynchronous loading?
Here is a delayed loading effect that can achieve your effect.
Reference: www.blueidea.com/..20.11716

Jquery asynchronously loads a tree in ztree31
This so easy!
For more information, see setting. data. simpleData. idKey/pIdKey and setting. data. key. name.