1931人阅读
zTree异步加载树形菜单
ztree是依赖于jquery实现的多功能树插件， 也是目前做菜单管理、权限管理用的较多的前段插件之一。目前ztree功能十分强大， 这里只用了部分异步加载的功能。
文件引入， 注意ztree基于jquery实现， 在它之前一定要先引入jquery
&script type="text/javascript" src="./js/jquery.js"&
&link rel="stylesheet" href="./zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"/&
&script type="text/javascript" src="./zTree_v3/js/jquery.ztree.core-3.5.min.js"&&/script&
全局ztree设置， 详情可参考
var setting = {
enable: true,
url:"{:U('System/asyncrequest')}",
autoParam:["id", "name"],
dataFilter: filter,
fontCss: setFont,
callback: {
beforeClick: zTreeOnBeforeClick,
onClick: zTreeOnClick,
onAsyncError: zTreeOnAsyncError
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
function setFont(treeId, treeNode) {
if (treeNode && treeNode.isParent) {
return {color: "blue"};
return null;
function zTreeOnBeforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes. i&l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
return childN
function zTreeOnClick(even, treeId, treeNode) {
var sub_id
= treeNode.
var sub_name
= treeNode.
var parentId
= treeNode.getParentNode().
var parentName
= treeNode.getParentNode().
$(document).ready(function(){
$.fn.zTree.init($("#dropdownMenu"), setting);
页面DOM元素
id="DropdownMenuBackground" style="position: height:260width: 260min-width:205 background-color:border:1overflow-y:overflow-x:margin-top: 74margin-left: 47%;"&
id="dropdownMenu" class="ztree"&&
服务端配置
public function asyncrequest(){
$father_id = $_POST['id'];
$model = D('Module');
$data = array();
if (!isset($father_id)) {
$tempData = array();
$tempData =
$model-&getAllModule(array('pmid' =& -1, 'enable' =& 1) );
$a = array();
foreach ($tempData as $d) {
$tempData['id'] = $d['mid'];
$tempData['name'] = $d['name'];
$tempData['issuper'] = $d['is_super'];
$tempData['pid'] = $d['pmid'];
$tempData['isParent'] = true;
$a[] = $tempData;
unset($tempData);
$data = $a;
unset($a);
$tempData = array();
$tempData =
$model-&getAllModule(array('enable' =& 1, 'pmid' =& $father_id) );
$a = array();
foreach ($tempData as $d) {
$tempData['id'] = $d['mid'];
$tempData['name'] = $d['name'];
$tempData['issuper'] = $d['is_super'];
$tempData['pid'] = $father_id;
$tempData['isParent'] = false;
$a[] = $tempData;
unset($tempData);
$data = $a;
unset($a);
$this-&ajaxReturn($data, "JSON");
该dome采用php作为服务端， php不熟的可在百度云盘下载Java版的按理！！！！！！
@ruoyi 转载请注明出处！！！
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：8864次
排名：千里之外
原创：20篇
(4)(5)(1)(1)(13)jQuery zTree 动态树的构建 -
- ITeye技术网站
博客分类：
一．下载、安装zTree
zTree下载地址：
这里我下载的是JQuery zTree v3.0。目前最新版是v3.1，一般不建议使用最新版。
下载完成后解压，可以看到其中有三个文件夹和一个更新日志文件。
zTree的样式和图片存放位置
Demo文件夹 存放zTree的一些实例
存放的是所有与zTree相关的js文件。这里min是压缩版，我们在开发的时候建议使用未压缩版的（不含min的）。
开发时建议将这些压缩包统一放在一个文件夹（比如zTree）下，这样，如果需要查看对应的实例，可直接在当前工程下访问并做修改，便于开发使用。当然，开发完成后可以删除demo内容。
二．编辑页面
&%@ page language="java" pageEncoding="UTF-8"%&
&%@taglib uri="/struts-tags" prefix="s"%&
&%@ include file="../common/header.jsp" %&
&!DOCTYPE html&
&title&指派权限&/title&
&meta http-equiv="content-type" content="text/ charset=UTF-8"&
&link rel="stylesheet" type="text/css" href="${root}/css/dialogStyle.css"/&
&link rel="stylesheet" href="${root}/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"&
&link rel="stylesheet" type="text/css" href="${root}/js/jquery/themes/icon.css" /&
&STYLE type="text/css"&
BACKGROUND: url(../images/bt_bg.gif);
BORDER-RIGHT: #
PADDING-RIGHT: 2
BORDER-TOP: #CCCCCC 1
PADDING-LEFT: 2 FONT-SIZE: 12
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
BORDER-LEFT: #CCCCCC 1
CURSOR: COLOR:
PADDING-TOP: 2
BORDER-BOTTOM: #
为提高效率，建议将1.4.4换成1.6.4版
&script type="text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"&&/script&
&script type="text/javascript" src="${root}/js/jquery/jquery-1.6.4.min.js"&&/script&
&script type="text/javascript" src="${root}/js/jquery/jquery.easyui.min.js"&&/script&
&script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.core-3.0.js"&&/script&
&script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.excheck-3.0.js"&&/script&
&script type="text/javascript" src="${root}/js/winutil.js"&&/script&
&script type="text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"&&/script&
&SCRIPT type="text/javascript"&
var setting = {
enable: true,//异步处理
//contentType: "application/json",//提交参数方式，这里 JSON 格式，默认form格式
url: '${root}/sys/listoper.action?roleId=${roleId}',//异步获取json格式数据的路径
autoParam: ["id","name"]//异步加载时需要提交的参数，多个用逗号分隔
callback: {//回调函数，在这里可做一些回调处理
//beforeAsync: zTreeBeforeAsync
check: {//设置 zTree 的节点上是否显示 checkbox / radio ,默认为false
enable: true
simpleData: {
如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId
并且让数据满足父子关系。*/
enable: true,//true / false 分别表示 使用 / 不使用 简单数据模式
idKey: "id",
pIdKey: "pId",
rootPId: 0
var zNodes =[];//树节点，json格式，异步加载可设置为null或[]
var zTreeO//树对象
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);//实例化后直接返回树对象
//异步提交表单
$('#permissionform').form({
url: '${root}/sys/PermissionManagerole.action',
onSubmit: function() {
//获取树对象中选中的节点
var nodes = zTreeObj.getCheckedNodes();
var s = '';//选中节点ids
//遍历选中的节点，为s赋值
for(var i=0; i&nodes. i++){
if (s != '') s += ',';
s += nodes[i].
document.all("roledto.permissionIds").value =
success: function(data) {
//操作成功，返回信息
var data = jQuery.parseJSON(data);
if(data.success == false){
alert(data.msg);
m_close();
&BODY onunload="m_close()" style="background-color: #f7f7f7;"&
&div style="border: 0width: 100%;height:100%;background-color: #f7f7f7;"&
&!-- 树加载后存放的容器 --&
&ul id="permission_tree" class="ztree" style="border: 0 background-color: #f7f7f7;"&&/ul&
&!-- 提交授权操作表单 --&
&form id="permissionform" method="post"&
&td&&input type="hidden" name="roledto.permissionIds" /&&/td&
&td&&input type="hidden" name="roledto.roleId" value="${roleId}"/&&/td&
&td&&input type="hidden" name="orgid" value="${orgId}"/&&/td&
&td width="100%" align="right"&
&input type="submit" style="width:60" class="btn" value="保存"/&&
&input type="button"
style="width:60"
class="btn" value="取消" onclick="m_close()"/&
三．后台Action
private String roleId;
* 显示权限栏目树
* 这里采用一次加载所有树节点的方式
* 当然也可以换成逐级动态加载的方式
* @throws IOException
@SuppressWarnings("unchecked")
public String list() throws IOException{
* 再次查询时直接返回，这里采用所有节点一次加载的方式
* @param id 点击树的节点时传递到后台的属性id
if(ValidateUtil.validateString(id)){
return SUCCESS;
//根据角色找到对应的操作权限id
String operationids = this.getOperationIdsByRoleId(roleId);
//查询所有的权限分类，如系统管理、订单管理、采购管理等等，作为树的一级节点
List&OperationClass& list =operationClassServiceImpl.getAllOperationClass();
//存放树节点信息
List&Map&String,Object&& items = new ArrayList&Map&String,Object&&();
//当前角色对应的操作
List&RoleOperation& rolist = this.roleServiceImpl.getRoleOperationByRoleId(roleId);
for(OperationClass node: list){
//第一级遍历，遍历所有的权限分类
Map&String,Object& item = new HashMap&String,Object&();
//最外层，父节点
item.put("id", node.getOperationClassId());//id属性
，数据传递
item.put("name", node.getClassName()); //name属性，显示节点名称
item.put("isParent", true);//设置为父节点，这样所有最外层节点都是统一的图标，看起来会舒服些
//item.put("iconSkin", "diy02");//设置节点的图标皮肤， diy02在zTreeStyle.css中进行设置
* 如果当前节点（权限分类）有对应的操作（权限），添加操作权限作为该节点的子节点
if (node.getOperations()!=null&&node.getOperations().size()&0){
Iterator&Operation& it = node.getOperations().iterator();
//存放第一层子节点信息
List&Map&String,Object&& subitems = new ArrayList&Map&String,Object&&();
while(it.hasNext()){//对操作进行遍历
Map&String,Object& subitem = new HashMap&String,Object&();//第二层
Operation oper = (Operation) it.next();
subitem.put("id", oper.getOperationId()+":oper");//id属性
，数据传递
subitem.put("name", oper.getOperationName()); //name属性，显示节点名称
* 如果操作中有多个选项，添加选项作为第二层的子节点
if(oper!=null&&oper.getOptions()!=null){
String uoption = "";//有操作权限的操作选项
for(RoleOperation ro : rolist){
if(ro.getOperation().getOperationId().
equals(oper.getOperationId())){//如果当前角色有对应的操作
uoption = ro.getOptions();
String[] suboper = oper.getOptions().split(",");
List&Map&String,Object&& items3 = new ArrayList&Map&String,Object&&(); //第三层
for(int i=0;i&suboper.i++){
Map&String,Object& item3 = new HashMap&String,Object&();
item3.put("id", "opt:"+oper.getOperationId()+":"+suboper[i]);//id属性
，数据传递
item3.put("name", suboper[i]); //name属性，显示节点名称
if(uoption!=null&&!"".equals(uoption)){//如果操作中有操作选项
if(uoption.contains(suboper[i]+",")){//如果当前角色有此操作选项
item3.put("checked", true);//将此选项选中
items3.add(item3);//添加到树的第三层
subitem.put("children", items3);//添加第二层子节点
}else{//如果操作没有选项
if(operationids.contains(oper.getOperationId())){//当前角色有此操作
subitem.put("checked", true);//将此操作选中
subitems.add(subitem);//添加到树的第二层
item.put("children", subitems);//添加第一层子节点
items.add(item); //添加到树的第一层
JSONArray json = JSONArray.fromObject(items);//转成json格式
jsonString = json.toString();//json格式字符串
return SUCCESS;
四．编后语
公司之前用的jQuery dTree。dTree也是比较好用的，跟zTree的区别不是很大。但有一点比较让人难以忍受，dTree在页面的解析效率比较低。在权限操作这一块儿换成zTree后速度提高了好几倍。
zTree的具体使用已在页面和action模块做了细致的说明，如果对其中的用法比较有疑问可以查看官方的api，中文api地址如下：，或者也可以给我留言，我们共同探讨。
浏览 18661
浏览: 272805 次
来自: 杭州
com.mon.util 这个包下的工 ...
q 写道原来就支持自定义不同时长的cac ...
原来就支持自定义不同时长的cache的吧配置cachemana ...
我看没生效也是这样，更新下spring boot版本试试
牛X，我服。关于.NET MVC Ztree树形菜单的有关问题 - ASP.NET当前位置:& &&&关于.NET MVC Ztree树形菜单的有关问题关于.NET MVC Ztree树形菜单的有关问题&&网友分享于：&&浏览：0次关于.NET MVC Ztree树形菜单的问题？MVC如何把数据绑到Ztree里，当我保存了此次选择的项，下次编辑数据时，在加载Ztree时，如何把已经选择过的项的CheckBox设为true？------解决方案--------------------ztree网上demo很多啊，自己看看撒------解决方案--------------------Ztree&是可以通过json数据来绑定的~
ViewBag.ZtreeJson=
@"var&nodes&=&[
{id:1,&pId:0,&name:&"父节点1"},
{id:11,&pId:1,&name:&"子节点1"},
{id:12,&pId:1,&name:&"子节点2"}
view中&script中
@html.Raw(ViewBag.ZtreeJson)
var&setting&=&{&&
&&&&&&&&isSimpleData&:&true,&&&&&&&&&&&&&&//数据是否采用简单&Array&格式，默认false&&
&&&&&&&&treeNodeKey&:&"id",&&&&&&&&&&&&&&&//在isSimpleData格式下，当前节点id属性&&
&&&&&&&&treeNodeParentKey&:&"pId",&&&&&&&&//在isSimpleData格式下，当前节点的父节点id属性&&
&&&&&&&&showLine&:&true,&&&&&&&&&&&&&&&&&&//是否显示节点间的连线&&
&&&&&&&&checkable&:&true&&&&&&&&&&&&&&&&&&//每个节点上是否显示&CheckBox&&
$(function()&{&&
&&&&zTree&=&$("#tree").zTree(setting,&nodes);&&
其他的自己脑补
http://www.ztree.me/v3/demo.php#_201
还有构造出对应的json数据------解决方案--------------------引用:都没说到重点：
当我保存了此次选择的项，下次编辑数据时，在加载Ztree时，如何把已经选择过的项的CheckBox设为true？
“当我保存了此次选择的项”，你如何保存？数据库？内存变量？无论哪种方式，你load新树的时候得把check状态赋值到json里然后绑定，当然也可以先绑定再去改，但显然没这必要
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有&>&&>&&>&&>&前端框架 zTree 从数据库中动态加载树形菜单
前端框架 zTree 从数据库中动态加载树形菜单
上传大小：162KB
前端框架 zTree 从数据库中动态加载树形菜单前端框架
综合评分：4.5（14位用户评分）
所需积分：0
下载次数：435
审核通过送C币
创建者：chenfeng522111
创建者：qq
创建者：zhangguo5
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
前端框架 zTree 从数据库中动态加载树形菜单
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
fromscartch89
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：If you use the Chrome / FireFox / Opera / IE9 browser will be even more dazzling effect!
License ( MIT License )
copyright (c)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Contact Us
If you like Google, zTree is on Google Code:
If you like Github, zTree is on Github:
Discuss issues or features of zTree, you can go OSCHINA: &&&&
Discuss issues or features of zTree, you can go ITEYE: &&&&
Ask questions, (no need for login), go to zTree Hi:
If you can't do any of the above, just Email: