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


Posted in Javascript onFebruary 25, 2016

本文实例讲解了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("确认删除 节点 -- " + 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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
灵活的理解JavaScript中的this指向
Feb 25 #Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 #Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 #Javascript
jQuery zTree加载树形菜单功能
Feb 25 #Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 #Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 #Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 #Javascript
You might like
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
jquery 上下滚动广告
2009/06/17 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python显示天气预报
2014/03/02 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
餐饮营销方案
2014/02/23 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
小学综合实践活动总结
2014/07/07 职场文书
八一建军节演讲稿
2014/09/10 职场文书
小学教师自我评价
2015/03/04 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL