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/ ...
随机推荐
- Myeclipse的默认工作区间怎么恢复提示框?
好久一直使用默认工作空间.现在,回过头来想让那个提示框回来. 该如何做呢? 1.找到我们的myeclipse安装目录下的 2.false是关闭. 3.改成true 4.同时,新增新的工作区间和之前旧的 ...
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第六篇：拦截器
摘要 本文将对“MVC公告发布系统”的发布公告功能添加日志功能和异常处理功能,借此来讨论ASP.NET MVC中拦截器的使用方法. 一个小难题 我们继续完善“MVC公告发布系统”, ...
- JS/CSS 全屏幕导航 – 从上到下动画
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- vue 星星评分组件
显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...
- arduino串口输出问题
- 在 Windows 10 x64 上安装及使用 ab 工具的流程
本文转自:www.shuijingwanwq.com/2017/04/18/1568/ 1.基于AB测试工具进行高并发情形下的模拟测试,打开:http://httpd.apache.org/docs/ ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- Java与模式：装饰(Decorator)模式
装饰模式使用被装饰类的一个子类的实例.把client的调用委派到被装饰类,装饰模式的关键在于这样的扩展是全然透明的. 装饰模式在Java种使用也非常广泛,比方我们在又一次定义button.对话框等 ...
- context.getSystemService的简单说明
在android开发过程中这种方法一定不会陌生,比方我们在获取WindowManager和LayoutInflater对象的时候就须要我们调用这种方法.这种方法在context这个抽象类的一个抽象方法 ...
- 分类算法简介 分类： B10_计算机基础 2015-03-09 11:08 257人阅读 评论(0) 收藏
一.决策树 决策树是用于分类和预测的主要技术之一,决策树学习是以实例为基础的归纳学习算法,它着眼于从一组无次序.无规则的实例中 推理出以决策树表示的分类规则.构造决策树的目的是找出属性和类别间的关系, ...