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插件实现树形菜单和异步加载的全部代码,希望对大家的学习有所帮助。

(0)

相关推荐

  • ztree获取当前选中节点子节点id集合的方法

    本文实例讲述了ztree获取当前选中节点子节点id集合的方法.分享给大家供大家参考.具体分析如下: 要求:获取当前选中节点的子节点id集合. 步骤: 1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值. treeNode:当前选中节点对象 function getChildNodes(treeNode) { var childNodes = ztree.transformToArray(tree

  • 后台获取ZTREE选中节点的方法

    本文实例讲述了后台获取ZTREE选中节点的方法.分享给大家供大家参考.具体实现方法如下: function count() { var zTree = $.fn.zTree.getZTreeObj("classpurview"); checkCount = zTree.getCheckedNodes(true); var classpurview = ""; for(var i=0;i<checkCount.length;i++) { classpurview

  • JQuery ztree带筛选、异步加载实例讲解

    本文实例分享了JQuery ztree带筛选.异步加载实例,供大家参考,具体内容如下 <html> < head> < base href="<%=basePath%>"> <title>My JSP 'ztree.jsp' starting page</title> <link rel="stylesheet" href="zTrees/css/zTreeStyle/zTree

  • jquery zTree异步加载、模糊搜索简单实例分享

    本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:

  • js树插件zTree获取所有选中节点数据的方法

    本文实例讲述了js树插件zTree获取所有选中节点数据的方法.分享给大家供大家参考.具体分析如下: 由于刚接触Tree方面的东西.在网上看到了zTree,是中国人写的.所以API肯定是中文的.而且评论也很好.所以尝试用zTree在项目中.这个获取所有选中节点数据很简单.看一下API就能看懂了.所以我就直接上代码了. 复制代码 代码如下: <!DOCTYPE html> <HTML> <HEAD>     <TITLE> ZTREE DEMO - Standa

  • jquery zTree异步加载简单实例分享

    首先提供Ztree官方网站http://www.ztree.me. Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式. 当前版本Ztree 3.5.01 simple.html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>simple.html</title> <meta http-equiv="keywords"

  • zTree异步加载展开第一级节点的实现方法

    在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数 var isFirst = true; function onAsyncSuccess(event, treeId) { if (isFirst) { //获得树形图对象 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取根节点个数,getNodes获取的是根节点的集合 var nodeLi

  • JQuery ztree 异步加载实例讲解

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 准备工作: 1下载 JQuery ZTree 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-INF/lib下即可. 代码实例: index.jsp <%@ page language="jav

  • Jquery zTree 树控件异步加载操作

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动.编辑.删除 支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数配置实现 灵活多变的功能 异步加载的意思就是: 当点

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

    本文实例讲解了jQuery使用zTree插件实现树形菜单和异步加载,并且可以进行编辑,分享给大家供大家参考,具体内容如下 效果图: 一.HTML代码 <html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <l

  • 基于jquery的finkyUI插件与Ajax实现页面数据加载功能

    复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/json.js"></script> <script type="text/javascript" src="js/jquer

  • zTree树形插件异步加载方法详解

    本文实例为大家分享了zTree树形插件异步加载,Struts2框架,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>异步加载</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/zTree_v

  • jQuery zTree 异步加载添加子节点重复问题

    zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(MIT 许可证).如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助. zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE.FireFox.Chrome.Opera.

  • zTree 树插件实现全国五级地区点击后加载的示例

    在项目功能中需要录入户籍地和现居住地,为减少用户输入量,将使用树插件选择全国五级地区+输入框输入详细地址.这里优先使用了zTree树插件.为了以后使用学习,在这里进行相关记录.当然在实现过程中参考各大神的文章是必不可少的,可以结合了自己的实际需求进行快速解决问题. zTree 树插件官网简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 树插件官网地址 http://www.treejs.c

随机推荐