jQuery使用zTree插件實現樹形菜單和異步加載

更新時間：2016年02月25日 14:28:37 投稿：lijiao

這篇文章主要介紹了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("確認刪除 節(jié)點 -- " + treeNode.name + " 嗎？");
 }
 function beforeRename(treeId, treeNode, newName) {
 if (newName.length == 0) {
  alert("節(jié)點名稱不能為空.");
  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\":\"系統(tǒng)管理\",\"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插件實現樹形菜單和異步加載的全部代碼，希望對大家的學習有所幫助。

您可能感興趣的文章:

jQuery使用$.ajax進行即時驗證的方法
這篇文章主要介紹了jQuery使用$.ajax進行即時驗證的方法,較為詳細的分析了jQuery基于ajax實現前臺驗證與后臺數據交互的相關技巧,非常簡單實用,需要的朋友可以參考下
2015-12-12
jquery實現圖片預加載
這篇文章主要介紹了jquery實現圖片預加載的方法，內容很詳細，帶領大家全方位學習jquery圖片預加載，感興趣的小伙伴們可以參考一下
2015-12-12
CSS+Jquery實現頁面圓角框方法大全
前不久做項目，要用到大量的頁面圓角的框塊，以前實現的時候都是用圖片做背景之類的方法，那種方法對于少數的還是比較可行的，但是當涉及到整個項目都要用到這樣的效果時就顯得不夠優(yōu)化和簡練了。
2009-12-12
jquery ajax 同步異步的執(zhí)行示例代碼
jquery ajax 同步異步的執(zhí)行示例代碼，需要的朋友可以參考下。
2010-06-06
基于jquery實現漂亮的動態(tài)信息提示效果
這個效果是在頁面頭部出現的，出現一下會自動隱藏，上面有x那個提示就要手動關閉一下，其他的都是自動隱藏的！
2011-08-08
JS實現復制內容到剪貼板功能兼容所有瀏覽器(推薦)
這篇文章主要介紹了JS實現復制內容到剪貼板功能兼容所有瀏覽器(推薦)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
jQuery實現仿Alipay支付寶首頁全屏焦點圖切換特效
這篇文章主要介紹了jQuery實現仿Alipay支付寶首頁全屏焦點圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-05-05
jQuery動態(tài)效果顯示人物結構關系圖的方法
這篇文章主要介紹了jQuery動態(tài)效果顯示人物結構關系圖的方法,涉及jQuery操作json結構數據及鼠標事件的技巧,需要的朋友可以參考下
2015-05-05
jquery?操作DOM的基本用法分享
jquery?操作DOM的基本用法分享，使用jquery的朋友可以參考下，方便以后對dom操作
2012-04-04
jquery.form.js實現將form提交轉為ajax方式提交的方法
這篇文章主要介紹了jquery.form.js實現將form提交轉為ajax方式提交的方法,涉及jQuery插件實現form表單的Ajax提交技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04