jQuery使用zTree插件实现树形菜单和异步加载 - [技术教程]

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

效果图：

查看图片

一、HTML代码

<html>
<head runat="server">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <link href="http://www.gimoo.net/t/1903/zTree/css/demo.css" rel="stylesheet" />
 <link href="http://www.gimoo.net/t/1903/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
 <script src="http://www.gimoo.net/t/1903/zTree/js/jquery-1.4.4.min.js"></script>
 <script src="http://www.gimoo.net/t/1903/zTree/js/jquery.ztree.core-3.5.js"></script>
 <script src="http://www.gimoo.net/t/1903/zTree/js/jquery.ztree.excheck-3.5.js"></script>
 <script src="http://www.gimoo.net/t/1903/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控件的内容，请参考专题《jQuery插件ztree使用汇总》

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

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类