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

2019-11-20 10:30:28

字体：大中小

来源：转载

供稿：网友

本文实例讲解了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("确认删除 节点 -- " + 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插件实现树形菜单和异步加载的全部代码，希望对大家的学习有所帮助。

上一篇：基于javascript实现动态时钟效果

下一篇：灵活的理解JavaScript中的this指向