jQuery使用zTree插件实现树形菜单和异步加载
2016-02-25 00:00
1016 查看
本文实例讲解了jQuery使用zTree插件实现树形菜单和异步加载,并且可以进行编辑,分享给大家供大家参考,具体内容如下
效果图:
一、HTML代码
二、异步请求的后台数据:
以上就是zTree插件实现树形菜单和异步加载的全部代码,希望对大家的学习有所帮助。
struts2+jquery+json实现异步加载数据(自写)
JQuery异步加载无限下拉框级联功能实现示例
jquery ztree实现下拉树形框使用到了json数据
无限树Jquery插件zTree的常用功能特性总结
Jquery树插件zTree用法入门教程
json+jQuery实现的无限级树形菜单效果代码
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
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异步加载简单实例分享struts2+jquery+json实现异步加载数据(自写)
JQuery异步加载无限下拉框级联功能实现示例
jquery ztree实现下拉树形框使用到了json数据
无限树Jquery插件zTree的常用功能特性总结
Jquery树插件zTree用法入门教程
json+jQuery实现的无限级树形菜单效果代码
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
JQuery ztree 异步加载实例讲解
jquery ztree实现树的搜索功能
相关文章推荐
- jQuery iScroll.js 移动端滚动条美化插件第1/5页
- Jquery读取返回的JSON数据
- 用jquery给元素动态绑定事件及样式
- jquery 绘图工具 flot 学习笔记
- 造轮子:JQuery实现ajax跨域
- 移动web开发前准备知识了解(html5、jquery)笔记
- jquery中如何防止冒泡事件
- jQuery之获取标签
- jQuery之#id选择器
- jQuery显示隐藏密码插件jquery.toggle-password演示
- JQuery面试题答案
- jQuery多次选中checkbox失效
- jQuery多次选中checkbox失效
- 轻巧的jQuery提示框插件Tipso演示
- 使用jquery-mockjax模拟ajax请求做前台測试
- jquery获取和失去焦点改变样式
- 微信iOS端无法执行jquery on()方法
- JQuery中的html(),text(),val()区别
- jquery easyui datagrid 加载成功,选中某一行
- jQuery的三种$()