jQuery使用zTree插件實(shí)現(xiàn)樹(shù)形菜單和異步加載
本文實(shí)例講解了jQuery使用zTree插件實(shí)現(xiàn)樹(shù)形菜單和異步加載,并且可以進(jìn)行編輯,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
一、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("確認(rèn)刪除 節(jié)點(diǎn) -- " + treeNode.name + " 嗎?"); } function beforeRename(treeId, treeNode, newName) { if (newName.length == 0) { alert("節(jié)點(diǎn)名稱不能為空."); 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>
二、異步請(qǐng)求的后臺(tái)數(shù)據(jù):
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")//根據(jù)會(huì)員卡號(hào),查詢會(huì)員卡信息 { 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\":\"權(quán)限組管理\",\"pId\":\"2\"},"); sb.Append("{\"id\":\"104\",\"name\":\"權(quán)限菜單管理\",\"pId\":\"2\"}"); sb.Append("]"); Response.Write(sb.ToString()); } } } }
更多關(guān)于ztree控件的內(nèi)容,請(qǐng)參考專題《jQuery插件ztree使用匯總》
以上就是zTree插件實(shí)現(xiàn)樹(shù)形菜單和異步加載的全部代碼,希望對(duì)大家的學(xué)習(xí)有所幫助。
- jQuery樹(shù)形插件jquery.simpleTree.js用法分析
- jQuery 利用ztree實(shí)現(xiàn)樹(shù)形表格的實(shí)例代碼
- jQuery EasyUI結(jié)合zTree樹(shù)形結(jié)構(gòu)制作web頁(yè)面
- jQuery ztree實(shí)現(xiàn)動(dòng)態(tài)樹(shù)形多選菜單
- jQuery樹(shù)形控件zTree使用小結(jié)
- jQuery zTree加載樹(shù)形菜單功能
- jquery ztree實(shí)現(xiàn)下拉樹(shù)形框使用到了json數(shù)據(jù)
- jquery樹(shù)形插件zTree高級(jí)使用詳解
相關(guān)文章
jquery 讀取頁(yè)面load get post ajax 四種方式代碼寫法
jquery 讀取頁(yè)面load get post ajax 四種方式代碼寫法,學(xué)習(xí)jquery的朋友可以參考下。2011-04-04jQuery獲取多種input值的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery獲取多種input值的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jQuery form 表單驗(yàn)證插件(fieldValue)校驗(yàn)表單
這篇文章主要介紹了jQuery form 表單驗(yàn)證插件(fieldValue)校驗(yàn)表單的相關(guān)資料,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加、元素獲取與事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2018-06-06Jquery實(shí)現(xiàn)仿騰訊娛樂(lè)頻道焦點(diǎn)圖(幻燈片)特效
這篇文章主要介紹了Jquery實(shí)現(xiàn)仿騰訊娛樂(lè)頻道焦點(diǎn)圖(幻燈片)特效,需要的朋友可以參考下2015-03-03js根據(jù)json數(shù)據(jù)中的某一個(gè)屬性來(lái)給數(shù)據(jù)分組的方法
今天小編就為大家分享一篇js根據(jù)json數(shù)據(jù)中的某一個(gè)屬性來(lái)給數(shù)據(jù)分組的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10JQuery為textarea添加maxlength屬性的代碼
textarea默認(rèn)不支持maxlength屬性。所以通過(guò)jquery實(shí)現(xiàn)下。具體的看代碼。2010-04-04