关键词：
zTree是一个依靠 jQuery 实现的多功能 “树插件”，支持选择框等显示，动态更改图标，提供多种事件响应回调，而且异步数据功能强大。相信涉及大型项目或者大量数据时，它的使用将非常方便。
利用ztree和Dwr框架可以轻松的实现后台数据的异步加载，他们都是利用Ajax进行后台数据的异步刷新的，页面不会重新加载，而且速度非常快
兼容 IE、FireFox、Chrome 等浏览器
• 在一个页面内可同时生成多个 Tree 实例
• 支持 JSON 数据
• 支持一次性静态生成 和 Ajax 异步加载 两种方式
• 支持多种事件响应及反馈
• 支持 Tree 的节点移动、编辑、删除
• 支持任意更换皮肤 / 个性化图标（依靠css）
• 支持极其灵活的 checkbox 或 radio 选择功能
• 简单的参数配置实现 灵活多变的功能
demo只是展示树菜单,不包含增删
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <!--引入相关css和js文件--> <link rel="stylesheet" href="../ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../ztree/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../ztree/js/jquery.ztree.core-3.5.min.js"></script> <script type="text/javascript" src="../ztree/js/jquery.ztree.excheck-3.5.min.js"></script> <script type="text/javascript"> // 初始化ztree参数 var zTreeObj; var setting = check : enable : true , data : keep : parent : true , simpleData : enable : true ; // 后台查询ztree数据,以json何时返回 $(document).ready(function() /*$.post( "ztreeAction.action", "id":"$id", function(data) zTreeObj = $.fn.zTree.init($(‘#ztree‘), setting, data); //rmTree 树的id，支持多个树 zTreeObj.expandAll(true); //展开所有树节点 , "json"); */ var data = [ "id":"100","pId":"", "isParent":"true","name":"100","checked":"true", "id":"100100","pId":"100", "isParent":"true","name":"100100","checked":"true", "id":"100100100","pId":"100100", "isParent":"false","name":"100100100","checked":"true", "id":"200","pId":"", "isParent":"true","name":"200","checked":"true", "id":"200100","pId":"200", "isParent":"true","name":"200100","checked":"true", "id":"200101","pId":"200", "isParent":"false","name":"200101","checked":"true", "id":"200100100","pId":"200100", "isParent":"false","name":"200100100","checked":"true", "id":"200100101","pId":"200100", "isParent":"false","name":"200100101","checked":"false" ]; zTreeObj = $.fn.zTree.init($(‘#ztree‘), setting, data); //rmTree 树的id，支持多个树 zTreeObj.expandAll(true); //展开所有树节点 ); //获取所有选择的节点 function submitCheckedNodes() var nodes = new Array(); nodes = zTreeObj.getCheckedNodes(true); //取得选中的结点 var str = ""; for (i = 0; i < nodes.length; i++) if (str != "") str += ","; str += nodes[i].id; $(‘#xIds‘).val(str); alert($(‘#xIds‘).val()); </script> </head> <body> <form action="" method="post"> <input hidden="hidden" type="text" id="xIds" name="xIds" value=""> <div> <ul id="ztree" class="Chart ztree"> </ul> </div> <input type="button" onclick="submitCheckedNodes()" value="检查勾选的节点"> </form> </body> </html>
结果展示
谁会做ztree。树菜单选中保存进数据库。下次加载树菜单打开时，还是显示的是：勾选着上次选中保存的
数据已经保存进数据库了是吧！然后只需要在查询树的方法里写sql;sql包含树中展示的所有数据以及选中的数据，只需在选中的数据后面拼接checked:true就行了参考技术A解决了吗？我需要这个答案 查看详情
ztree异步加载树结构(代码片段)
varsetting=async:autoParam:["parentId"],enable:true,type:"post",url:getUrl,dataFilter:filter,,check:chkStyle:"radio",enable:false,chkboxType:"Y":"s","N":"ps",radioType:"level",view:dblClickExp 查看详情
使用ztree展示树形菜单结构
官网：http://www.treejs.cn/v3/main.php#_zTreeInfo一、功能简介在权限系统中，实现给角色指定菜单权限的功能。主要包括以下几点：读取全部菜单项，并以树形结构展现；勾选角色拥有的菜单权限，保存入库；重新编辑角色权限时，默... 查看详情
输入框点击下滑ztree菜单(代码片段)
...： 需求：当点击选择地区的时候会出现如上图的下拉菜单。分析：首先肯定给这个输入框加监听，click方法，然后将ztree的div显示，这里的重点应该是怎么设计这个ztree使其能够显示在输入框的下面显示。这部分的代码也是在... 查看详情
ztree前台展示多级菜单，后台配置方法
第一步、前台HTML页面。1<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="feeClassification.aspx.cs"Inherits="Webs.pages.Parameter.feeClassification"%>23<!DOCTYPEhtml>4<htmllang="en-us">5& 查看详情
ztree插件实现菜单树
1<!DOCTYPEhtml>2<html>3<head>4 <metacharset="utf-8"/>5 <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">6 <title>Title</title>7 <linkhref="J 查看详情
从零认识ztree树插件
首先说绑定数据，怎么样绑定到树状菜单下。先贴代码： 1、第一步，先引入js脚本文件，还有一个css文件，还要引用一个jQuery的脚本文件2、第二步，创建一个ul的标签，给它设置一个Id,并且给它一个class="ztree"，这是必... 查看详情
ztree菜单树js控件见习
今天学习一个zTree菜单树的js编写的菜单控件，官网已经提供了完整的演示demo和API文档以及源码的github地址，官方网址首先从官网的下载地址下载控件，解压后的目录是这样的：从目录可以看出，给出了完整的... 查看详情
ztree菜单树js控件见习
今天学习一个zTree菜单树的js编写的菜单控件，官网已经提供了完整的演示demo和API文档以及源码的github地址，官方网址首先从官网的下载地址下载控件，解压后的目录是这样的：从目录可以看出，给出了完整的... 查看详情
ztree权限树，用户角色
下载相应的jar包，放入webapp下面创建相应的tree.jsp里面的id,pId,target,url这些属性固定属性可以和你的实体类里面的属性相对应，pId0表示根菜单pId1表示一级菜单看demo怎么使用的可以照着来用 查看详情
ztree行政地区树状展示
Ztree行政地区树状展示（点击加载）效果如下： 开始贴代码：实体类Item，用于对Ztree的节点展示publicclassItem{ privateStringid; privateStringpId; privateStringname; privateinttype; privateStringisParent;//getters、setters} 通过业务代码获取加载的... 查看详情
使用ztree插件构建树形菜单
zTree下载：https://github.com/zTree/zTree_v3目录：就我看来，zTree较为实用的有以下几点：zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。支持JSON数据支持静态和Ajax异步... 查看详情
树形菜单解决方案推荐
...的组合是zTree最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。zTree是开源免费的软件（MIT许可证）。在开源的作用下，zTree越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的zTr... 查看详情
react使用antd的treeselect树选择组件实现多个树选择循环(代码片段)
...将菜单数组组装成一个二维数组，以待循环树选择组件作展示数据使用4，循环树选择组件，实现树选择菜单功能5，读取某条用户信息的菜单权限，将返回字符 查看详情
ztree(代码片段)
最近写了一个关于动态加载左侧菜单的小Demo，用来和大家分享下！控制器publicJsonResultCanCaiDan()List<CaiDan>list=bll.GetCaiDan();varlinq=fromsinlistselectnewid=s.Id,pId=s.Pid,//pId中大小写不能变要不然实现不了树形name=s.Name,url=s.Paths,targ 查看详情
制作一棵ztree
我们在做web项目时，常会用到一些树形菜单。在此，我们利用ztree实现树形菜单的效果。zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree的最大优点。 接下来，我演示一棵... 查看详情
ztree修改数据回显(代码片段)
...，并勾选 页面效果就是这样了，现在说下方法，先看代码//数据勾选回显 varzTree=$.fn.zTree.getZTreeObj("ztree");vartreeData=‘$treeData‘;if(null!=treeData&&treeData!="")vartreeDataArr=treeData.split(",");for(vari=0,l=treeDataArr.length;i<l;i++)... 查看详情
ztree仿淘宝树结构完美实现移动右键增删改(代码片段)
...种功能的组合是zTree最大优点。1、zTree是利用JQuery的核心代码，实现一套能完成大部分常用功能的Tree插件2、zTreev3.0将核心代码按照功能进行了分割，不需要的代码可以不用加载3、采用了延迟加载技术，上万节点轻松加载，即使... 查看详情