JQuery tree menu, using the zTree plug-in, asynchronously loading & amp; Edit function & amp; Check coexistence
I. Download zTree plug-in address: http://www.ztree.me
Ii. HTML code
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "zTree. aspx. cs" Inherits = "CssStudyWeb. zTree" %>
<Script src = "zTree/js/jquery-1.4.4.min.js"> </script> <script src = "zTree/js/jquery. ztree. core-3.5.js & gt; </script & gt; <script src = "zTree/js/jquery. ztree. excheck-3.5.js "> </script> <script src =" 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 "], dataFilter: filter, contentType:" application/json ", type:" get "}, 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, pare NtNode, 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); return confirm ("confirm to delete the node --" + treeNode. name +? ");} Function beforeRename (treeId, treeNode, newName) {if (newName. length = 0) {alert ("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); console. log ("add" + "# addBtn _" + treeNode. id); var btn = $ ("# addBtn _" + treeNode. tId); if (btn) btn. bind ("click", function () {var zTree = $. fn. zTree. getZTreeObj ("treeDemo"); zTree. addNodes (treeNode, {id: (100 + newCount), pId: treeNode. id, name: "new node" + (newCount ++)}); return false ;}) ;}; function removeHoverDom (treeId, treeNode) {console. log ("remove" + "# addBtn _" + treeNode. id); $ ("# addBtn _" + treeNode. tId ). unbind (). remove () ;}; $ (document ). ready (function () {$. fn. zTree. init ($ ("# treeDemo"), setting) ;}); </script>
Iii. Background Data of asynchronous requests:
Using System; using System. collections. generic; using System. linq; using System. text; using System. web; using System. web. UI; using System. web. UI. webControls; namespace CssStudyWeb. ajaxPage {public partial class GetAjax: System. web. UI. page {protected void Page_Load (object sender, EventArgs e) {if (Request. queryString ["z"] = "sdfww234edfsd") // query the membership card information based on the membership card number {StringBuilder sb = new StringBuilder (); sb. append ("["); sb. append ("{\" id \ ": \" 1 \ ", \" name \ ": \" sales order management \ ", \" pId \": \ "0 \"}, "); sb. append ("{\" id \ ": \" 101 \ ", \" name \ ": \" sales order list \ ", \" pId \": \ "1 \"}, "); sb. append ("{\" id \ ": \" 102 \ ", \" name \ ": \" sales order comprehensive QUERY \ ", \" pId \": \ "1 \"}, "); sb. append ("{\" id \ ": \" 2 \ ", \" name \ ": \" System Management \ ", \" pId \": \ "0 \"}, "); sb. append ("{\" id \ ": \" 103 \ ", \" name \ ": \" permission Group Management \ ", \" pId \": \ "2 \"}, "); sb. append ("{\" id \ ": \" 104 \ ", \" name \ ": \" permission menu management \ ", \" pId \": \ "2 \"} "); sb. append ("]"); Response. write (sb. toString ());}}}}
IV,