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 相关文章推荐
js 实现日期灵活格式化的小例子
Jul 14 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
灵活的理解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
Home Coffee Roasting
2021/03/03 咖啡文化
使用symfony命令创建项目的方法
2016/03/17 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python数据处理实战(必看篇)
2017/06/11 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
在django view中给form传入参数的例子
2019/07/19 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
django 微信网页授权登陆的实现
2019/07/30 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
酒店管理毕业生自荐信
2013/10/24 职场文书
2014年国培研修感言
2014/03/09 职场文书
学术会议主持词
2014/03/17 职场文书
运动会演讲稿
2014/05/07 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
经理岗位职责范本
2015/04/15 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android