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

前端技术 2023/09/08 JavaScript

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

本文地址：https://www.stayed.cn/item/21777

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案