jQuery树形菜单，使用zTree插件,异步载入 & 编辑功能&Check 共存
一、下载zTree插件 地址：http://www.ztree.me
二、HTML代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zTree.aspx.cs" Inherits="CssStudyWeb.zTree" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<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());
}
}
}
}
四、效果图
jQuery树形菜单，使用zTree插件,异步载入 & 编辑功能&Check 共存的更多相关文章
- jQuery树形控件zTree使用小结
作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...
- jquery树形菜单
转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- jQuery.YesShow - 图片轮播插件（带图片放大功能）
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- jquery树形菜单插件treeView
Jquery的treeview很好用,如果是简单的树形菜单按照下面的源码实例模仿就可以. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- jQuery树形控件zTree使用
http://www.cnblogs.com/AutumnRhyme/p/5915769.html .................................................. ...
- jQuery树形菜单(1)jquery.treeview
jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...
- jQuery 树形菜单
树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...
- jquery树形菜单完整代码
本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W ...
- ztree插件异步加载 使用RESTEasy报错 Only resource methods using @FormParam will work as expected. Resource methods consuming the request body by other means will not work as expected.
在使用ztree插件实现异步加载时遇到后台RESTEasy接收参数问题,查看后台报错: A servlet request to the URI http://localhost:8080/area/ ...
随机推荐
- Android RecyclerView嵌套RecyclerView
原理 RecyclerView嵌套RecyclerView的条目,项目中可能会经常有这样的需求,但是我们将子条目设置为RecyclerView之后,却显示不出来.自己试了很久,终于找到了原因:必须先设 ...
- TC Hangs when using quick search extended on win10 (1703)
https://ghisler.ch/board/viewtopic.php?t=47682 I recently updated windows 10 to the latest released ...
- 洛谷 P1691 有重复元素的排列问题
P1691 有重复元素的排列问题 题目描述 设R={r1,r2,……,rn}是要进行排列的n个元素.其中元素r1,r2,……,rn可能相同.使设计一个算法,列出R的所有不同排列. 给定n以及待排列的n ...
- 通达OA二次开发 对通达2015版微信查询用户信息模块升级开发（图文）
OA提供对微信的支持这一点做的很好,用户使用起来也更方便了. 而当中的个别功能还有待完好,比现在天要说的这个微信查询用户信息模块. 升级前的用法:输入@+用户中文名.而且要求全然匹配,然而在实际使用中 ...
- μC/OS中的任务就绪表
为了便于对就绪表的查找,μC/OSII又定义了一个数据类型为INT8U的变量OSRdyGrp, 并使该变量的每一位都对应OSRdyTbl[ ]的一个任务组(即数组的一个元素),如果某任务组中 有任务就 ...
- mahout測试朴素贝叶斯分类样例
对于这个測试建议大家先理解原理,这里我画了例如以下的示意图 接下来就依照例如以下的细节来输入指令測试: 首先前提是Hadoop安装并启动,mahout已经安装了. <strong>< ...
- 搭建聊天机器人Bot Framework
Bot Framework 搭建聊天机器人 这周我来跟大家分享的是在Microsoft Build 2016上发布的微软聊天机器人的框架. 现如今,各种人工智能充斥在我们的生活里.最典型的人工智能产品 ...
- PL/SQL笔记（一）
PL/SQL概述 PL/SQL是一种高级的数据库程序设计语言,专门使用与Oracle语言基于数据库的服务器的内部,所以PL/SQL代码可以对数据库进行快速的处理. 1.什么是PL/SQL? PL/SQ ...
- 9.3 Binder系统_驱动情景分析_服务获取过程
4. 服务获取过程 test_client客户端: (1)在用户态先构造name=“hello”的数据(服务的名字是hello),调用ioctl发送数据给service_manager(handle= ...
- 辛星笔记之高质量JavaScript代码书写要点
首先本文章是http://www.zhangxinxu.com/wordpress/?p=1173 的读书笔记,读者能够自己到鑫旭的空间去阅读原文.这里我对其进行了简化. 可维护的代码的一些要求: ( ...