Bootstrap jQuery ztree loading data asynchronously, check select & Add, change, delete nodes

：

First, download Ztree plugin address:http://www.ztree.me

Second, 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 "></script> <script src=". /scripts/ztree/js/jquery.ztree.excheck-3.5.js "></script> <script src=". /scripts/ztree/js/jquery.ztree.exedit-3.5.js "></script> <script type=" Text/javascript "> var setti ng = {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, ParentNode, 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);//haha come out return confirm ("Confirm Delete node--" + Treenode.name + "?)        "); } function Beforerename (Treeid, TreeNode, NewName) {if (newname.length = = 0) {Alert ("node The name cannot be empty! ");            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.b            Lur (); ' ></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 panel-default" > <div class= "panel-heading" > 

Iii. ztreestyle.css changes the picture style of the Join node button
. ztree Li Span.button.add {                margin-left:2px;                Margin-right: -1px;                Background-position: -144px 0;                Vertical-align:top;            }



Four, backstage 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 list \ ", \" pid\ ": \" 1\ ", \" action\ ": \" List\ "},");                Sb. Append ("]");                Response.Write (sb.) ToString ());  }        }


Description: As far as I can see, the ID, name, and PID are the three required fields, and the PID is considered as parentid,open=true and the secondary node is expanded.







****************************************** Villa drawings recommended *************************************************



I want to have a villa, facing the sea, with spring flowers
Long Hing Technology Villa drawing design, here are the latest and most full villa drawings,
here have the most force of the Villa drawing discount activities, drawings containing building drawings, structural drawings, water supply and drainage diagram, electrical diagram
we are committed to providing our customers with Villa design drawings, drawings are professional, experienced design team design, free of charge to provide construction technical guidance
Address: http://bstzsj.taobao.com/





Bootstrap jQuery ztree loading data asynchronously, check select &amp; Add, change, delete nodes