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

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

WBOY

发布： 2016-05-16 15:13:22

原创

1570 人浏览过

本文实例讲解了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&#63;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插件实现树形菜单和异步加载的全部代码，希望对大家的学习有所帮助。