`
xinklabi
  • 浏览: 1591013 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论

Jquery-zTree的基本用法

 
阅读更多

【简介】

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

  • 兼容 IE、FireFox、Chrome 等浏览器
  • 在一个页面内可同时生成多个 Tree 实例
  • 支持 JSON 数据
  • 支持一次性静态生成 和 Ajax 异步加载 两种方式
  • 支持多种事件响应及反馈
  • 支持 Tree 的节点移动、编辑、删除
  • 支持任意更换皮肤 / 个性化图标(依靠css)
  • 支持极其灵活的 checkbox 或 radio 选择功能
  • 简单的参数配置实现 灵活多变的功能

     

    【官网】

    官网地址:http://www.baby666.cn/hunter/index.html

    在官网能够下载到zTree的源码、实例和API,其中作者pdf的API写得非常详细(中文的哦)

     

    【部分函数和属性介绍】

  • 核心:zTree(setting, [zTreeNodes])

    这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes,从而建立 Tree。

     

  • 核心参数:setting

    zTree 的参数配置都在这里完成,简单的说:树的样式、事件、访问路径等都在这里配置

    setting 举例:

    Js代码 复制代码 收藏代码
    1. var setting = {
    2. showLine: true,
    3. checkable: true
    4. };
    var setting = { 
        showLine: true, 
        checkable: true 
    }; 

     

    因为参数太多,具体参数详见zTreeAPI

     

  • 核心参数:zTreeNodes

    zTree 的全部节点数据集合,采用由JSON对象组成的数据结构,简单的说:这里使用Json格式保存了树的所有信息

    zTreeNodes的格式分为两种:利用Json格式嵌套体现父子关系和Array简单格式

    ①带有父子关系的标准 zTreeNodes 举例:

    Js代码 复制代码 收藏代码
    1. var zTreeNodes = [
    2. {"id":1, "name":"test1", "nodes":[
    3. {"id":11, "name":"test11", "nodes":[
    4. {"id":111, "name":"test111"}
    5. ]},
    6. {"id":12, "name":"test12"}
    7. ]},
    8. ......
    9. ];
    var zTreeNodes = [ 
        {"id":1, "name":"test1", "nodes":[ 
          {"id":11, "name":"test11", "nodes":[ 
            {"id":111, "name":"test111"} 
          ]}, 
          {"id":12, "name":"test12"} 
        ]}, 
        ...... 
    ]; 

    ②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例:

    Js代码 复制代码 收藏代码
    1. var treeNodes = [
    2. {"id":1, "pId":0, "name":"test1"},
    3. {"id":11, "pId":1, "name":"test11"},
    4. {"id":12, "pId":1, "name":"test12"},
    5. {"id":111, "pId":11, "name":"test111"},
    6. ......
    7. ];
    var treeNodes = [                                                                       
        {"id":1, "pId":0, "name":"test1"}, 
        {"id":11, "pId":1, "name":"test11"}, 
        {"id":12, "pId":1, "name":"test12"}, 
        {"id":111, "pId":11, "name":"test111"}, 
        ...... 
    ]; 

     

     

    【实例一】(Java代码)

    ①在页面引用zTree的js和css:

    Html代码 复制代码 收藏代码
    1. <!-- ZTree树形插件 -->
    2. <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
    3. <!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->
    4. <script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>
    <!-- ZTree树形插件 -->
    <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css">  -->
    <script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>

    ②在script脚本中定义setting和zTreeNodes

    Java代码 复制代码 收藏代码
    1. var setting = {
    2. isSimpleData : true, //数据是否采用简单 Array 格式,默认false
    3. treeNodeKey : "id", //在isSimpleData格式下,当前节点id属性
    4. treeNodeParentKey : "pId", //在isSimpleData格式下,当前节点的父节点id属性
    5. showLine : true, //是否显示节点间的连线
    6. checkable : true //每个节点上是否显示 CheckBox
    7. };
    8. var treeNodes = [
    9. {"id":1, "pId":0, "name":"test1"},
    10. {"id":11, "pId":1, "name":"test11"},
    11. {"id":12, "pId":1, "name":"test12"},
    12. {"id":111, "pId":11, "name":"test111"},
    13. ];
    var setting = {
    		isSimpleData : true,              //数据是否采用简单 Array 格式,默认false
    		treeNodeKey : "id",               //在isSimpleData格式下,当前节点id属性
    		treeNodeParentKey : "pId",        //在isSimpleData格式下,当前节点的父节点id属性
    		showLine : true,                  //是否显示节点间的连线
    		checkable : true                  //每个节点上是否显示 CheckBox
    	};
    
    var treeNodes = [ 
        {"id":1, "pId":0, "name":"test1"}, 
        {"id":11, "pId":1, "name":"test11"}, 
        {"id":12, "pId":1, "name":"test12"}, 
        {"id":111, "pId":11, "name":"test111"}, 
    ]; 
    
    

    ③在进入页面时生成树结构:

    Js代码 复制代码 收藏代码
    1. var zTree;
    var zTree;
    Js代码 复制代码 收藏代码
    1. $(function() {
    2. zTree = $("#tree").zTree(setting, treeNodes);
    3. });
    $(function() {
    	zTree = $("#tree").zTree(setting, treeNodes);
     });

    ④最后查看效果:

    【实例二】(从后台获取简单格式Json数据)

    ①后台代码封装简单格式Json数据:

    Java代码 复制代码 收藏代码
    1. public void doGetPrivilegeTree() throws IOException{
    2. String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";
    3. String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";
    4. String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";
    5. String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";
    6. List<String> lstTree = new ArrayList<String>();
    7. lstTree.add(s1);
    8. lstTree.add(s2);
    9. lstTree.add(s3);
    10. lstTree.add(s4);
    11. //利用Json插件将Array转换成Json格式
    12. response.getWriter().print(JSONArray.fromObject(lstTree).toString());
    13. }
    public void doGetPrivilegeTree() throws IOException{
    		String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";
    		String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";
    		String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";
    		String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";
    		List<String> lstTree = new ArrayList<String>();
    		lstTree.add(s1);
    		lstTree.add(s2);
    		lstTree.add(s3);
    		lstTree.add(s4);
    		//利用Json插件将Array转换成Json格式
    		response.getWriter().print(JSONArray.fromObject(lstTree).toString());
    	}

     

    ②页面使用Ajax获取zTreeNodes数据再生成树

    Js代码 复制代码 收藏代码
    1. var setting = {
    2. isSimpleData : true, //数据是否采用简单 Array 格式,默认false
    3. treeNodeKey : "id", //在isSimpleData格式下,当前节点id属性
    4. treeNodeParentKey : "pId", //在isSimpleData格式下,当前节点的父节点id属性
    5. showLine : true, //是否显示节点间的连线
    6. checkable : true //每个节点上是否显示 CheckBox
    7. };
    8. var zTree;
    9. var treeNodes;
    10. $(function(){
    11. $.ajax({
    12. async : false,
    13. cache:false,
    14. type: 'POST',
    15. dataType : "json",
    16. url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径
    17. error: function () {//请求失败处理函数
    18. alert('请求失败');
    19. },
    20. success:function(data){ //请求成功后处理函数。
    21. alert(data);
    22. treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes
    23. }
    24. });
    25. zTree = $("#tree").zTree(setting, treeNodes);
    26. });
    var setting = {
    	isSimpleData : true,              //数据是否采用简单 Array 格式,默认false
    	treeNodeKey : "id",               //在isSimpleData格式下,当前节点id属性
    	treeNodeParentKey : "pId",        //在isSimpleData格式下,当前节点的父节点id属性
    	showLine : true,                  //是否显示节点间的连线
    	checkable : true                  //每个节点上是否显示 CheckBox
    };
    
    var zTree;
    var treeNodes;
    
    $(function(){
    	$.ajax({
    		async : false,
    		cache:false,
    		type: 'POST',
    		dataType : "json",
    		url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径
    		error: function () {//请求失败处理函数
    			alert('请求失败');
    		},
    		success:function(data){ //请求成功后处理函数。  
    			alert(data);
    			treeNodes = data;   //把后台封装好的简单Json格式赋给treeNodes
    		}
    	});
    
    	zTree = $("#tree").zTree(setting, treeNodes);
    });

    ③最后显示效果

     

    【实例三】从后台动态获取数据,树节点提供右键菜单功能

    ①配置setting:

    Js代码 复制代码 收藏代码
    1. var url = "/ospm/loginInfo/doGetPrivilegeTree.action";
    2. //zTree基本设置
    3. var setting = {
    4. async : true, //需要采用异步方式获取子节点数据,默认false
    5. asyncUrl : root + url, //当 async = true 时,设置异步获取节点的 URL 地址 ,允许接收 function 的引用
    6. asyncParam : ["id"], //提交的与节点数据相关的必需参数
    7. isSimpleData : true, //数据是否采用简单 Array 格式,默认false
    8. treeNodeKey : "id", //在isSimpleData格式下,当前节点id属性
    9. treeNodeParentKey : "parentId", //在isSimpleData格式下,当前节点的父节点id属性
    10. nameCol : "privName", //在isSimpleData格式下,当前节点名称
    11. expandSpeed : "fast", //设置 zTree节点展开、折叠时的动画速度或取消动画(三种默认定义:"slow", "normal", "fast")或 表示动画时长的毫秒数值(如:1000)
    12. showLine : true, //是否显示节点间的连线
    13. callback : { //回调函数
    14. rightClick : zTreeOnRightClick //右键事件
    15. }
    16. };
    var url = "/ospm/loginInfo/doGetPrivilegeTree.action";
    	//zTree基本设置
    	var setting = {
    		async : true, //需要采用异步方式获取子节点数据,默认false
    		asyncUrl : root + url, //当 async = true 时,设置异步获取节点的 URL 地址 ,允许接收 function 的引用
    		asyncParam : ["id"], //提交的与节点数据相关的必需参数
    		isSimpleData : true, //数据是否采用简单 Array 格式,默认false
    		treeNodeKey : "id", //在isSimpleData格式下,当前节点id属性
    		treeNodeParentKey : "parentId", //在isSimpleData格式下,当前节点的父节点id属性
    		nameCol : "privName",            //在isSimpleData格式下,当前节点名称
    		expandSpeed : "fast", //设置 zTree节点展开、折叠时的动画速度或取消动画(三种默认定义:"slow", "normal", "fast")或 表示动画时长的毫秒数值(如:1000) 
    		showLine : true, //是否显示节点间的连线
    		callback : { //回调函数
    			rightClick : zTreeOnRightClick   //右键事件
    		}
    	};

     

    ②配置鼠标右键事件,显示右键菜单的代码

    Js代码 复制代码 收藏代码
    1. //显示右键菜单
    2. function showRMenu(type, x, y) {
    3. $("#rMenu ul").show();
    4. if (type=="root") {
    5. $("#m_del").hide();
    6. $("#m_check").hide();
    7. $("#m_unCheck").hide();
    8. }
    9. $("#rMenu").css({"top":y+"px", "left":x+"px", "display":"block"});
    10. }
    11. //隐藏右键菜单
    12. function hideRMenu() {
    13. $("#rMenu").hide();
    14. }
    15. //鼠标右键事件-创建右键菜单
    16. function zTreeOnRightClick(event, treeId, treeNode) {
    17. if (!treeNode) {
    18. zTree.cancelSelectedNode();
    19. showRMenu("root", event.clientX, event.clientY);
    20. } else if (treeNode && !treeNode.noR) { //noR属性为true表示禁止右键菜单
    21. if (treeNode.newrole && event.target.tagName != "a" && $(event.target).parents("a").length == 0) {
    22. zTree.cancelSelectedNode();
    23. showRMenu("root", event.clientX, event.clientY);
    24. } else {
    25. zTree.selectNode(treeNode);
    26. showRMenu("node", event.clientX, event.clientY);
    27. }
    28. }
    29. }
    //显示右键菜单
    	function showRMenu(type, x, y) {
    		$("#rMenu ul").show();
    		if (type=="root") {
    			$("#m_del").hide();
    			$("#m_check").hide();
    			$("#m_unCheck").hide();
    		}
    		$("#rMenu").css({"top":y+"px", "left":x+"px", "display":"block"});
    	}
    	//隐藏右键菜单
    	function hideRMenu() {
    		$("#rMenu").hide();
    	}
    	
    	//鼠标右键事件-创建右键菜单
    	function zTreeOnRightClick(event, treeId, treeNode) {
    		if (!treeNode) {
    			zTree.cancelSelectedNode();
    			showRMenu("root", event.clientX, event.clientY);
    		} else if (treeNode && !treeNode.noR) { //noR属性为true表示禁止右键菜单
    			if (treeNode.newrole && event.target.tagName != "a" && $(event.target).parents("a").length == 0) {
    				zTree.cancelSelectedNode();
    				showRMenu("root", event.clientX, event.clientY);
    			} else {
    				zTree.selectNode(treeNode);
    				showRMenu("node", event.clientX, event.clientY);
    			}
    		}
    	}
    Js代码 复制代码 收藏代码
    1. <P><SPAN style="BACKGROUND-COLOR: #fafafa"><!-- 右键菜单div -->
    2. <div id="rMenu" style="position:absolute; display:none;">
    3. <li>
    4. <ul id="m_add" onclick="addPrivilege();"><li>增加</li></ul>
    5. <ul id="m_del" onclick="delPrivilege();"><li>删除</li></ul>
    6. <ul id="m_del" onclick="editPrivilege();"><li>编辑</li></ul>
    7. <ul id="m_del" onclick="queryPrivilege();"><li>查看</li></ul>
    8. </li>
    9. </div></SPAN></P>

    <!-- 右键菜单div --> <div id="rMenu" style="position:absolute; display:none;"> <li> <ul id="m_add" onclick="addPrivilege();"><li>增加</li></ul> <ul id="m_del" onclick="delPrivilege();"><li>删除</li></ul> <ul id="m_del" onclick="editPrivilege();"><li>编辑</li></ul> <ul id="m_del" onclick="queryPrivilege();"><li>查看</li></ul> </li> </div>

    ③页面加载时生成树并且监听鼠标点击事件,及时隐藏右键菜单

    Js代码 复制代码 收藏代码
    1. function reloadTree() {
    2. hideRMenu();
    3. zTree = $("#tree").zTree(setting, treeNodes);
    4. }
    5. var zTree;
    6. var treeNodes = [];
    7. $(function() {
    8. reloadTree();
    9. $("body").bind(//鼠标点击事件不在节点上时隐藏右键菜单
    10. "mousedown",
    11. function(event) {
    12. if (!(event.target.id == "rMenu" || $(event.target)
    13. .parents("#rMenu").length > 0)) {
    14. $("#rMenu").hide();
    15. }
    16. });
    17. });
    function reloadTree() {
    		hideRMenu();
    		zTree = $("#tree").zTree(setting, treeNodes);
    	}	
    	
    	var zTree;
    	var treeNodes = [];
    	
    
    $(function() {
    		reloadTree();
    
    		$("body").bind(//鼠标点击事件不在节点上时隐藏右键菜单
    				"mousedown",
    				function(event) {
    					if (!(event.target.id == "rMenu" || $(event.target)
    							.parents("#rMenu").length > 0)) {
    						$("#rMenu").hide();
    					}
    				});
    	});

     

    ④后台代码根据id获取树节点信息

    -----------------------Action层-----------------------

    Java代码 复制代码 收藏代码
    1. public void doGetPrivilegeTree() throws IOException{
    2. String sId = request.getParameter("id");
    3. int treeId = 0;
    4. if(sId!=null&&!"".equals(sId)){
    5. treeId = Integer.parseInt(sId);
    6. }
    7. List<Privilege> lstPriv = privilegeService.findPrivilegeTreeById(treeId);
    8. response.setCharacterEncoding("UTF-8");
    9. response.getWriter().print(JSONArray.fromObject(lstPriv).toString());
    10. }
    public void doGetPrivilegeTree() throws IOException{
    		String sId = request.getParameter("id");
    		int treeId = 0;
    		if(sId!=null&&!"".equals(sId)){
    			treeId = Integer.parseInt(sId);
    		}
    		List<Privilege> lstPriv = privilegeService.findPrivilegeTreeById(treeId);
    		response.setCharacterEncoding("UTF-8");
    		response.getWriter().print(JSONArray.fromObject(lstPriv).toString());
    	}

     

    -----------------------Service层-----------------------

    Java代码 复制代码 收藏代码
    1. /**
    2. * 根据节点id,查询其下级节点的数据
    3. */
    4. @SuppressWarnings("unchecked")
    5. @Override
    6. public List<Privilege> findPrivilegeTreeById(int treeId) {
    7. StringBuffer sbTree= new StringBuffer();
    8. sbTree.append("SELECT NEW Privilege(p.id,p.privName,p.description,p.status,p.isLeaf,p.parentId) FROM Privilege p ");
    9. sbTree.append("WHERE p.parentId=:treeId ");
    10. sbTree.append("AND p.status!=:del ");
    11. Map<String,Object> mapTree = new HashMap<String, Object>();
    12. mapTree.put("treeId", treeId);
    13. mapTree.put("del", Privilege.PRIV_STATUS_DELETE);
    14. return (List<Privilege>) privilegeDao.findByHql(sbTree.toString(), mapTree);
    15. }
    /**
    	 * 根据节点id,查询其下级节点的数据
    	 */
    	@SuppressWarnings("unchecked")
    	@Override
    	public List<Privilege> findPrivilegeTreeById(int treeId) {
    		StringBuffer sbTree= new StringBuffer();
    		sbTree.append("SELECT NEW Privilege(p.id,p.privName,p.description,p.status,p.isLeaf,p.parentId) FROM Privilege p ");
    		sbTree.append("WHERE p.parentId=:treeId ");
    		sbTree.append("AND p.status!=:del ");
    		
    		Map<String,Object> mapTree = new HashMap<String, Object>();
    		mapTree.put("treeId", treeId);
    		mapTree.put("del", Privilege.PRIV_STATUS_DELETE);
    		
    		return (List<Privilege>) privilegeDao.findByHql(sbTree.toString(), mapTree);
    	}

    ⑤最后查看效果:

    • 大小: 5 KB
    • 大小: 4.5 KB
    • 大小: 3.9 KB

     

  • 分享到:
    评论

    相关推荐

      jquery-ztree.rar

      3. 初始化树:使用jQuery选择器选择容器元素,调用zTree的初始化方法,传入配置参数和数据。 4. 交互处理:绑定事件监听,根据业务需求处理节点的点击、展开等行为。 四、zTree的API及事件 1. API:如`treeObj....

      jquery-zTree工具包

      本文将详细介绍jQuery-zTree的核心特性和使用方法。 一、jQuery-zTree概述 jQuery-zTree是一款基于jQuery库的开源项目,其主要功能是构建动态、可交互的树形结构。它不仅支持基本的树形操作,如展开、折叠、选择...

      jquery-zTree_v3

      4. 调用zTree方法:使用`$.fn.zTree.init()`方法启动zTree,并传入之前准备好的DOM元素和配置对象。 5. 交互处理:通过zTree提供的API,如`getTreeObj()`、`getSelectedNodes()`等,实现对树节点的动态操作。 四、...

      jquery-zTreeAPI v2.6.zip

      《jQuery-zTree API v2.6详解:打造高效前端树形组件》 在网页开发中,数据的组织和展示方式多种多样,其中树形结构因其层次清晰、逻辑明确的特点,常用于目录管理、组织架构展示等领域。jQuery-zTree是一款基于...

      jquery-ztree.rar Jquery包

      本篇文章将深入探讨jQuery ZTree的核心特性、使用方法以及常见应用场景。 1. **核心特性** - **动态加载**:ZTree支持节点的动态加载,可以根据用户操作或数据变化,实时更新树形结构,提升用户体验。 - **多选...

      JQuery-zTree-v3.1.rar_ztree

      在`JQuery-zTree-v3.1.rar`这个压缩包中,包含了zTree的最新版本v3.1,提供了完整的源码和文档,方便开发者进行定制和使用。 **二、核心功能** 1. **动态加载**:zTree支持异步加载子节点数据,可以在用户展开父...

      jquery-ztree

      3. **初始化配置**:使用 `$.fn.zTree.init()` 方法初始化树,传入容器元素和配置对象。 4. **数据加载**:通过调用 API 的 `setting.treeObj.append()` 方法将 JSON 数据加载到树中。 ### 四、API 介绍 - `...

      jquery-zTree树形菜单

      **jQuery zTree 树形菜单详解** jQuery zTree是一款基于...通过了解其核心功能和使用方法,我们可以轻松地将其融入到项目中,提升用户体验。在实际开发中,可以根据需求对zTree进行更深入的定制,实现更多特色功能。

      JQuery zTree v3.4 ztree

      JQuery zTree 是一个基于 jQuery 的插件,用于在网页中构建交互式的树形结构。v3.4 版本是其稳定且功能丰富的版本之一,适用于多种应用场景,如数据展示、导航菜单、文件目录等。它以其易用性、高效性和强大的功能...

      select2ztree.zip

      3. 创建ZTree:将ZTree的节点数据作为JSON对象传递给ZTree初始化方法,配置相应的参数,如显示检查框、是否启用异步加载等。 4. 结合Select2与ZTree:将ZTree的容器作为Select2的下拉菜单,通过监听ZTree的节点点击...

      JQuery zTree asp.net范例

      4. **初始化zTree**: 使用JavaScript调用zTree的`$.fn.zTree.init()`方法,传入容器元素和JSON数据,初始化树结构。 5. **事件绑定**: 利用zTree的事件机制,可以监听用户的点击、拖拽等行为,进行相应的服务器端...

      zTreeAPI_v2.5

      本文将基于zTreeAPI_v2.5的官方文档,深入探讨其核心功能、参数配置以及常用方法,旨在帮助开发者更好地理解和应用zTree。 #### zTree核心函数 - **zTree(setting,[zTreeNodes])**:这是创建zTree实例的核心函数。...

      jQuery 树控件--JQuery_zTree_v2.2_1215.zip

      1. **zTreeAPI.chm**:这是一个帮助文档,提供了zTree的API接口详细说明,包括各个方法、事件和参数的使用指南,是开发和调试zTree时的重要参考资料。 2. **jquery-1.4.2.js**:这是jQuery库的1.4.2版本,zTree依赖...

      query-zTree的基本用法(转载)

      以上就是zTree基本用法的详细介绍,希望对你理解和使用zTree有所帮助。在实际项目中,你可以根据需求调整配置和数据源,实现更复杂的功能。更多高级特性与详细信息,可参考官方文档或社区资源。

      jquery.Ztree.js + css

      - **初始化ZTree**:在jQuery的$(document).ready()函数中,调用zTree的init方法启动ZTree。例如: ```javascript $(function() { $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); ``` **3. 功能扩展...

      jquery.zTree

      在使用jQuery zTree时,我们需要了解以下几个关键知识点: 1. **安装与引入**:首先,需要将JQuery库和zTree的CSS及JS文件引入到HTML页面中。例如,引入JQueryzTreev3.5压缩包中的`zTreeStyle.css`和`jquery.ztree....

      jquery ztree示例

      zTree通常要求与jQuery兼容,因此在使用zTree时,确保你的项目中已经包含了一个合适的jQuery版本。虽然这里提供的是1.4.2版,但建议使用更新的jQuery版本,如1.7以上,以获取更好的浏览器支持和性能优化。 ### 三、...

      罗二元 - zTree树形结构工具1

      这个工具由四个主要文件构成:zTreeStyle.css负责样式定义,jquery-2.1.1.min.js是jQuery库,而jquery.ztree.core.min.js和jquery.ztree.excheck.min.js则是zTree的核心功能和扩展的复选框功能模块。 zTree的主要...

      JQuery-zTree-v3.5.12.rar_JavaScript/JQuery_JavaScript_

      动态加载树 * 【修改】在异步加载模式下,使用 moveNode 方法,且 moveType != "inner" 时,也会导致 targetNode 自动加载子节点的 bug * 【修改】对已经显示的节点(nochecked=true)使用 showNodes 或 showNode 方法...

      jquery ztree开发使用的必需的css和js文件

      然后,jQuery ZTree的核心JavaScript文件为`jquery.ztree.core.js`,它包含了ZTree的基本功能,如节点操作、事件处理、数据加载等。在HTML文件中,需要这样引入: ```html &lt;script src="jquery.ztree.core.js"&gt; ```...

    Global site tag (gtag.js) - Google Analytics