jQuery使用zTree插件实现树形菜单和异步加载

本文实例讲解了jQuery使用zTree插件实现树形菜单和异步加载，并且可以进行编辑，分享给大家供大家参考，具体内容如下

效果图：

一、超文本标记语言代码

html head runat=' server ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title link href=' zTree/CSS/demo。CSS ' rel='样式表/link href=' zTree/CSS/zTree style/zTree style。CSS ' rel='样式表'/脚本src=' http : Ztree/js/jquery-1。4 .4 .量滴js /脚本src=' http : zTree/js/jquery。z树。核心-3.5。jsz=sdfww234edfsd '、autoParam: ['id']、dataFilter:筛选器、内容类型： ' application/JSON '、类型：'get' }、视图view: { expandSpeed: ' '、addHoverDom: addHoverDom、removeHoverDom:selectedMulti: false }、检查： { enable: true }、编辑3:函数筛选器(treeId，parentNode，childNodes) { if(！子节点)返回nullfor (var i=0，l=childNodes.lengthI li ) { childNodes[i].名称=子节点[I]。名字。替换(/\).n/g，'.');}返回childNodesbeforeRemove函数(treeId，树节点){ var zTree=$。fn。zTree。getztreeObj(' tree de ')；zTree.selectNode(树节点);返回确认('确认删除节点- ' treeNode.name '吗？');}函数beforeRename(treeId，treeNode，NewName){ if(NewName。长度==0){ alert('节点名称不能为空.');返回false}返回true} var新计数=1；函数AddHostDom(TreeID，TreeNode){ var SobJ=$(' # ' TreeNode。TiD ' _ span ')；if(TreeNode。editNameFlag)| $(' # AddBtn _ ' tree node。TiD ).长度0)返回；var AddStr=' span class='按钮add ' id=' AddBtn _ ' treenode。TiD ' ' title='添加节点' on focus=' this。blur()；/span '；索比。在(addStr)之后；控制台。日志(' add ' ' # AddBtn _ ' TreeNode。id)；var BTN=$(' # addBtn _ ' treenode。TiD)；if (btn) btn.bind('click ')，function(){ var zTree=$。fn。zTree。getztreeObj(' tree de ')；zTree.addNodes(treeNode，{ id: (100个新计数)，pId: treeNode.id，name : ' new node '(新计数)})；返回false })；};函数移除HousDom(TreeID，TreeNode){ console。日志(' remove ' ' # AddBtn _ ' TreeNode。id)；$('#addBtn_' treeNode.tId).解除绑定()。移除();};$(文档)。ready(function(){ $)。fn。ztree。init($(' # treedeo ')，设置)；});/script/head body ul id=' TreeDemo ' class=' z tree ' style=' width : 560 px；overflow : auto/ul/body/html二、异步请求的后台数据：

使用系统；使用系统。集合。通用；使用系统Linq .使用系统。文字；使用系统网络.使用系统网络。用户界面使用系统。网络控件；命名空间CssStudyWeb .AjaxPage{公共分部类GetAjax :系统.网页{受保护的无效网页_加载（对象发送者，事件参数){如果（请求查询字符串[' z ']==' sdfww 234 edfsd ')//根据会员卡号，查询会员卡信息{ StringBuilder sb=new StringBuilder()；某人(某人的简写)追加('[');某人(某人的简写)追加(' { \ ' id \ ' : \ ' 1 \ '，\ ' name \ ' : \ '销售单管理\ '，\ ' pId \ ' : \ ' 0 \ ' }，')；某人(某人的简写)追加(' { \ ' id \ ' : \ ' 101 \ '，\ ' name \ ' : \ '销售单列表\ '，\ ' pId \ ' : \ ' 1 \ ' }，')；某人(某人的简写)追加(' { \ ' id \ ' : \ ' 102 \ '，\ ' name \ ' : \ '销售单综合查询\ '，\ ' pId \ ' : \ ' 1 \ ' }，')；某人(某人的简写)追加(' { \ ' id \ ' : \ ' 2 \ '，\ ' name \ ' : \ '系统管理\ '，\ ' pId \ ' : \ ' 0 \ ' }，')；某人(某人的简写)追加(' { \ ' id \ ' : \ ' 103 \ '，\ ' name \ ' : \ '权限组管理\ '，\ ' pId \ ' : \ ' 2 \ ' }，')；某人(某人的简写)追加(' { \ ' id \ ' : \ ' 104 \ '，\ ' name \ ' : \ '权限菜单管理\ '，\ ' PiD ' : ' 2 \ ' } ')；某人(某人的简写)追加(']');回应。给（某人)写信ToString())；} } }}更多关于ztree控件的内容，请参考专题《jQuery插件ztree使用汇总》

以上就是zTree插件实现树形菜单和异步加载的全部代码，希望对大家的学习有所帮助。