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

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

一、HTML代码

<html><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="zTree/css/demo.css" rel="stylesheet" /> <link href="zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="zTree/js/jquery-1.4.4.min.js"></script> <script src="zTree/js/jquery.ztree.core-3.5.js"></script> <script src="zTree/js/jquery.ztree.excheck-3.5.js"></script> <script src="zTree/js/jquery.ztree.exedit-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, 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）;return confirm（"确认删除 节点 -- " + treeNode.name + " 吗？"）; } function beforeRename（treeId, treeNode, newName） {if （newName.length == 0） { alert（"节点名称不能为空."）; 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）;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></head><body> <ul id="treeDemo" class="ztree" style="width: 560px; overflow: auto;"></ul></body></html>

二、异步请求的后台数据：

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"）//根据会员卡号，查询会员卡信息 {StringBuilder sb = new StringBuilder（）;sb.Append（"["）;sb.Append（"{"id":"1","name":"销售单管理","pId":"0"},"）;sb.Append（"{"id":"101","name":"销售单列表","pId":"1"},"）;sb.Append（"{"id":"102","name":"销售单综合查询","pId":"1"},"）;sb.Append（"{"id":"2","name":"系统管理","pId":"0"},"）;sb.Append（"{"id":"103","name":"权限组管理","pId":"2"},"）;sb.Append（"{"id":"104","name":"权限菜单管理","pId":"2"}"）;sb.Append（"]"）;Response.Write（sb.ToString（））; }} }}

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