將JavaScript的jQuery庫中表單轉化為JSON對象的方法
963
2024-03-21
本文實例講解了jQuery使用zTree插件實現樹形菜單和異步加載,并且可以進行編輯,分享給大家供大家參考,具體內容如下
效果圖:
一、HTML代碼
<html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" /> <link 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]與我們聯系進行刪除處理。敬請諒解!