获取树对象中选中的节点

最新推荐文章于 2024-08-01 11:59:54 发布
最新推荐文章于 2024-08-01 11:59:54 发布
阅读量5.9k 收藏
点赞数
文章标签： object string json function jquery border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouou009/article/details/7583781
版权

一．下载、安装zTree

zTree下载地址：http://code.google.com/p/jquerytree/downloads/list

这里我下载的是JQuery zTree v3.0。目前最新版是v3.1，一般不建议使用最新版。

下载完成后解压，可以看到其中有三个文件夹和一个更新日志文件。

Css文件夹  zTree的样式和图片存放位置

Demo文件夹 存放zTree的一些实例

Js文件夹    存放的是所有与zTree相关的js文件。这里min是压缩版，我们在开发的时候建议使用未压缩版的（不含min的）。

开发时建议将这些压缩包统一放在一个文件夹（比如zTree）下，这样，如果需要查看对应的实例，可直接在当前工程下访问并做修改，便于开发使用。当然，开发完成后可以删除demo内容。

二．编辑页面

001<%@ page language="java" pageEncoding="UTF-8"%>
002<%@taglib uri="/struts-tags" prefix="s"%>
003<%@ include file="../common/header.jsp" %>
004
005<!DOCTYPE html>
006<HTML>
007<HEAD>
008<title>指派权限</title>
009<meta http-equiv="content-type"content="text/html; charset=UTF-8">
010
011<link rel="stylesheet"type="text/css" href="${root}/css/dialogStyle.css"/>
012<link rel="stylesheet"href="${root}/js/zTree/css/zTreeStyle/zTreeStyle.css"type="text/css">
013<link rel="stylesheet"type="text/css" href="${root}/js/jquery/themes/icon.css"/>
014<STYLE type="text/css">
015.btn {
016BACKGROUND: url(../images/bt_bg.gif);
017BORDER-RIGHT: #999999 1px solid;
018PADDING-RIGHT: 2px;
019BORDER-TOP: #CCCCCC 1px solid;
020PADDING-LEFT: 2px; FONT-SIZE: 12px;
021FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
022BORDER-LEFT: #CCCCCC 1px solid;
023CURSOR: hand; COLOR: black;
024PADDING-TOP: 2px;
025BORDER-BOTTOM: #999999 1px solid;
026}
027</STYLE>
028
029<!--
030为提高效率，建议将1.4.4换成1.6.4版
031<script type="text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"></script>
032-->
033<script type="text/javascript"src="${root}/js/jquery/jquery-1.6.4.min.js"></script>
034<script type="text/javascript"src="${root}/js/jquery/jquery.easyui.min.js"></script>
035<script type="text/javascript"src="${root}/js/zTree/js/jquery.ztree.core-3.0.js"></script>
036<script type="text/javascript"src="${root}/js/zTree/js/jquery.ztree.excheck-3.0.js"></script>
037<script type="text/javascript"src="${root}/js/winutil.js"></script>
038
039<!--
040<script type="text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"></script>
041-->
042<SCRIPT type="text/javascript">
043<!--
044var setting = {
045async: {
046enable: true,//异步处理
047
048//contentType: "application/json",//提交参数方式，这里 JSON 格式，默认form格式
049
050url: '${root}/sys/listoper.action?roleId=${roleId}',//异步获取json格式数据的路径
051
052autoParam: ["id","name"]//异步加载时需要提交的参数，多个用逗号分隔
053
054},
055callback: {//回调函数，在这里可做一些回调处理
056//beforeAsync: zTreeBeforeAsync
057},
058check: {//设置 zTree 的节点上是否显示 checkbox / radio ,默认为false
059enable: true
060},
061data: {
062simpleData: {
063/**
064如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId
065并且让数据满足父子关系。*/                 
066enable: true,//true / false 分别表示 使用 / 不使用 简单数据模式
067idKey: "id",
068pIdKey: "pId",
069rootPId: 0                         
070}
071}
072};
073
074var zNodes =[];//树节点，json格式，异步加载可设置为null或[]
075var zTreeObj;//树对象
076
077$(document).ready(function(){
078
079zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);//实例化后直接返回树对象
080
081//异步提交表单
082$('#permissionform').form({
083url: '${root}/sys/PermissionManagerole.action',
084onSubmit: function() {
085//获取树对象中选中的节点
086var nodes = zTreeObj.getCheckedNodes();
087var s = '';//选中节点ids
088//遍历选中的节点，为s赋值
089for(var i=0; i<nodes.length; i++){
090if (s != '') s += ',';
091s += nodes[i].id;
092}
093document.all("roledto.permissionIds").value = s;
094},
095success: function(data) {
096//操作成功，返回信息
097var data = jQuery.parseJSON(data);
098if(data.success == false){
099alert(data.msg);
100}
101m_close(); 
102}
103});
104
105});
106
107//-->
108</SCRIPT>
109</HEAD>
110
111<BODY onunload="m_close()"style="background-color: #f7f7f7;">
112<div style="border: 0px ;width: 100%;height:100%;background-color: #f7f7f7;">
113
114<!-- 树加载后存放的容器 -->
115<ul id="permission_tree"class="ztree" style="border: 0px; background-color: #f7f7f7;"></ul>
116
117<!-- 提交授权操作表单 -->
118<form id="permissionform"method="post">
119<table>
120<tr>
121<td><input type="hidden"name="roledto.permissionIds" /></td>
122<td><input type="hidden"name="roledto.roleId" value="${roleId}"/></td>
123<td><input type="hidden"name="orgid" value="${orgId}"/></td>
124</tr>
125<tr>
126<td width="100%"align="right">
127<input type="submit"style="width:60px;" class="btn"value="保存"/>&nbsp;
128<input type="button" style="width:60px;"  class="btn"value="取消" onclick="m_close()"/>
129</td>
130</tr>
131</table>
132</form>
133
134</div>
135
136</BODY>
137</HTML>

三．后台Action

001private String id;
002
003private String roleId;
004
005/**
006* 显示权限栏目树
007* 这里采用一次加载所有树节点的方式
008* 当然也可以换成逐级动态加载的方式
009* @return
010* @throws IOException
011*/
012@SuppressWarnings("unchecked")
013public String list() throws IOException{
014
015/**
016* 再次查询时直接返回，这里采用所有节点一次加载的方式
017* @param id 点击树的节点时传递到后台的属性id
018*/
019if(ValidateUtil.validateString(id)){
020return SUCCESS;
021}
022//根据角色找到对应的操作权限id
023String operationids = this.getOperationIdsByRoleId(roleId);
024//查询所有的权限分类，如系统管理、订单管理、采购管理等等，作为树的一级节点
025List<OperationClass> list =operationClassServiceImpl.getAllOperationClass();
026//存放树节点信息
027List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
028//当前角色对应的操作
029List<RoleOperation> rolist = this.roleServiceImpl.getRoleOperationByRoleId(roleId);
030
031for(OperationClass node: list){   //第一级遍历，遍历所有的权限分类
032
033Map<String,Object> item = new HashMap<String,Object>();  //最外层，父节点        
034item.put("id", node.getOperationClassId());//id属性  ，数据传递
035item.put("name", node.getClassName()); //name属性，显示节点名称
036item.put("isParent", true);//设置为父节点，这样所有最外层节点都是统一的图标，看起来会舒服些
037//item.put("iconSkin", "diy02");//设置节点的图标皮肤， diy02在zTreeStyle.css中进行设置
038
039/**
040* 如果当前节点（权限分类）有对应的操作（权限），添加操作权限作为该节点的子节点
041*/
042if (node.getOperations()!=null&&node.getOperations().size()>0){  
043
044Iterator<Operation> it = node.getOperations().iterator();
045//存放第一层子节点信息
046List<Map<String,Object>> subitems = new ArrayList<Map<String,Object>>();
047
048while(it.hasNext()){//对操作进行遍历
049
050Map<String,Object> subitem = new HashMap<String,Object>();//第二层
051Operation oper = (Operation) it.next();
052subitem.put("id", oper.getOperationId()+":oper");//id属性  ，数据传递
053subitem.put("name", oper.getOperationName());//name属性，显示节点名称
054
055/**
056* 如果操作中有多个选项，添加选项作为第二层的子节点
057*/
058if(oper!=null&&oper.getOptions()!=null){
059String uoption = "";//有操作权限的操作选项
060for(RoleOperation ro : rolist){
061if(ro.getOperation().getOperationId().
062equals(oper.getOperationId())){//如果当前角色有对应的操作
063uoption = ro.getOptions();
064}
065}
066String[] suboper = oper.getOptions().split(",");
067List<Map<String,Object>> items3 = new ArrayList<Map<String,Object>>();//第三层
068for(int i=0;i<suboper.length;i++){
069Map<String,Object> item3 = new HashMap<String,Object>();
070item3.put("id", "opt:"+oper.getOperationId()+":"+suboper[i]);//id属性  ，数据传递
071item3.put("name", suboper[i]); //name属性，显示节点名称
072
073if(uoption!=null&&!"".equals(uoption)){//如果操作中有操作选项
074if(uoption.contains(suboper[i]+",")){//如果当前角色有此操作选项
075item3.put("checked", true);//将此选项选中
076}
077}
078items3.add(item3);//添加到树的第三层
079} 
080subitem.put("children", items3);//添加第二层子节点
081
082}else{//如果操作没有选项
083if(operationids.contains(oper.getOperationId())){//当前角色有此操作
084subitem.put("checked", true);//将此操作选中
085
086}
087}
088subitems.add(subitem);//添加到树的第二层
089}
090item.put("children", subitems);//添加第一层子节点
091
092} 
093items.add(item); //添加到树的第一层 
094
095}
096JSONArray json = JSONArray.fromObject(items);//转成json格式
097jsonString = json.toString();//json格式字符串
098
099return SUCCESS;
100}

四．编后语

公司之前用的jQuery dTree。dTree也是比较好用的，跟zTree的区别不是很大。但有一点比较让人难以忍受，dTree在页面的解析效率比较低。在权限操作这一块儿换成zTree后速度提高了好几倍。

zTree的具体使用已在页面和action模块做了细致的说明，如果对其中的用法比较有疑问可以查看官方的api，中文api地址如下： http://www.baby666.cn/v3/api.php，或者也可以给我留言，我们共同探讨。

转自：http://hbxflihua.iteye.com/blog/1416383
ouou009
关注
element plus tree树获取选中节点的id
u010782109的博客
07-13 583
【代码】element plus tree树获取选中节点的id。
ztree获取当前选中节点子节点id集合的方法
09-03
在处理与树形结构相关的操作时，有时我们需要获取当前选中节点的子节点ID集合，以便进行进一步的数据处理或操作。本篇将详细介绍如何在ZTree中实现这一功能，同时解析`transformToArray()`方法的使用。 首先，获取...
前框 （一个）zTree 从数据库树形菜单动态加载
weixin_34144848的博客
08-09 300
        这些天做动态菜单使用此插件。现在有一个非常广泛的开源框架，最新QUI框架是菜单部分使用这个插件开发，因此，它是非常值获取深入的研究和探讨，通过使用非常丰富的感觉功能，己开发和编写，官网上有非常详尽的API能够參考，用着算顺手但学习使用的过程中也遇到了一些困难，听过重复測试和查资料都理解了。但也在思考一个问题，怎么样才干使得最快的时间从接触一个新东西到灵活掌握的程度？   ...
el-tree在多选情况下，获取所有选中的叶子结点
最新发布
weixin_37331593的博客
08-01 486
我们在使用 `elementUI` 的`el-tree`树形插件选中节点时，通常只需要得到选中的叶子结点，不需要父节点，这样的话可以通过`getCheckedNodes`方法来获取。
前端框架 （一）zTree 从数据库中动态加载树形菜单
weixin_34252686的博客
05-13 928
这几天做动态菜单用到了这个插件，目前用的很广泛的一个开源框架，最新发布的QUI框架就是用这个插件开发的菜单部分，因此还是很值得深入研究和学习，通过使用感觉功能很丰富，好多函数不用自己开发和编写，官网上有很详尽的API可以参考，用着算顺手但学习使用的过程中也遇到了一些困难，听过反复测试和查资料都理解了，但也在思考一个问题，怎么样才能使得最快的时间从接触一个新东西到灵活掌握的程...
zTree动态加载
bahongying2053的博客
10-23 132
@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Cont...
ztree 获取根节点
weixin_30776545的博客
05-06 253
function getRoot() { var treeObj = $.fn.zTree.getZTreeObj("tree-div"); //返回一个根节点 var node = treeObj.getNodesByFilter(function (node) { return node.level == 0 }, true); } function...
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
10-14
在本文中，我们将深入探讨如何在Vue Treeselect中获取选中节点的ids和labels，这对于实现动态数据交互和展示用户选择至关重要。 首先，我们要了解Vue Treeselect提供的几个关键属性和事件： 1. `v-model`：这是Vue...
js树插件zTree获取所有选中节点数据的方法
10-24
**js树插件zTree获取所有选中节点数据的方法** zTree是一款基于JavaScript的树状图组件，它具有丰富的功能和良好的性能，被广泛应用于网页中的数据展示和交互操作。在实际开发中，我们常常需要获取用户在树结构中...
zTree从数据库中动态加载树形菜单
12-15
这几天做动态菜单用到了这个插件，目前用的很广泛的一个开源框架，新发布的QUI框架是用这个插件开发的菜单部分，因此还是很值得深入研究和学习，通过使用感觉功能很丰富，好多函数不用自己开发和编写，官网上有很详尽的API可以参考，用着算顺手但学习使用的过程中也遇到了一些困难，听过反复测试和查资料都理解了，但也在思考一个问题，怎么样才能使得快的时间从接触一个新东西到灵活掌握的程度？ 　　这个不仅仅是一个树形结构的菜单，每个节点左边可以有一个复选框，看了看也挺简单的，只需要在setting里面配置一个checked属性即可。 　　目前经验觉得这个用在组织结构、分类、尤其是权限，如果用这个插件完成会很完
asp.net 无限递归树型菜单... 采用dTree封装的自定义控件
10-22
Vs2008 项目.. 2005的同志们如下使用 bin目录 找到dll,添加dll 引用后 工具栏会出现RecursiveTree该控件 拖进aspx 页面即可... 后台需要写2句代码 this.RecursiveTree1.Dataset = GetList(""); this.RecursiveTree1.DataTextField("菜单配置","Menu_ID", "Menu_ParentID", "Menu_Name", "Menu_Url", "Menu_Name","",""); 具体重载方法 说明 添加引用后,控件名.点 自行查看... //这里改写成你的数据库链接.. //查询一张表 返回dataset 类型 (陆续推出其他类型绑定 //注意: 数据表格式必须是 递归类型 //比如: //ID Pid Name //1 0 a //2 0 b //3 0 c //4 0 d //5 1 e //id为5的 是ID为1的子类... //6 1 f //同上 //7 5 g //ID为7的是ID 为5的子类 以此类推 //技术交流 联系QQ:337212522 //需要源码的加Q
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
10-20
通过这种方式，我们可以轻松地在zTree中实现获取当前选中节点在同级节点中的序号，这对于处理基于层级的数据或需要对树结构进行排序、索引的操作非常有用。记住，zTree提供了许多其他事件和方法，可以根据需求进一步...
后台获取ZTREE选中节点的方法
09-03
- **异步通信**：获取选中节点信息后，一般会通过Ajax等方式将数据发送到后台，注意处理好同步与异步的问题，确保数据的准确性和时效性。 - **错误处理**：当ZTREE未初始化或者ID不正确时，`getZTreeObj`可能会返回`...
ztree动态加载数据
崔伟的博客
08-22 1642
ztree以数组形式动态加载数据 $(function(){     nodeTree();      })     /*var nodeName=$("#nodeName").val();//名称     var capacity=$("#ui-id-1 option:selected").val();//容量     var zone=$("#citySel").val();//地区    ...
前端框架 zTree 从数据库中动态加载树形菜单
小七的博客
07-04 4569
本文源自：http://blog.csdn.net/jiaolong724/article/details/25737463   这几天做动态菜单用到了这个插件，目前用的很广泛的一个开源框架，最新发布的QUI框架就是用这个插件开发的菜单部分，因此还是很值得深入研究和学习，通过使用感觉功能很丰富，好多函数不用自己开发和编写，官网上有很详尽的API可以参考，用着算顺手但学习使用的过程中也
Jquery.zTree动态加载数据
为技术而生
03-09 3435
1.ajax获取数据 var zTreeNodes;var setting = { view: { selectedMulti: true //支持多选 }, data: { simpleData: { enable: true //开启 } }, callback: { beforeClick: getCurrentNode, ...
如何获取dtree树复选框选中的节点
05-12
然后，在需要获取复选框选中节点的地方，我们可以使用该方法进行获取，最后处理结果即可。 例如，以下是一个获取选中的节点并处理的示例代码： ```javascript var treeObj = null; // 定义全局变量存储树对象 // ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值