1、TreeJson
package com.hyxt.data.box.util;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONObject;
/**
* easui中的tree_data.json数据,只能有一个root节点
* [{
* "id":1,
* "text":"Folder1",
* "iconCls":"icon-save",
* "children":[{
* "text":"File1",
* "checked":true
* }]
* }]
* 提供静态方法formatTree(List<TreeJson> list) 返回结果
* TreeJson.formatTree(treeJsonlist) ;
*
* @author huw
*/
public class TreeJson implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
private String id;
private String pid;
private String text;
private String iconCls;
private String state;
private String checked;
private JSONObject attributes = new JSONObject();
private List<TreeJson> children = new ArrayList<TreeJson>();
/**
* ***** setter and getter *********
*/
public static List<TreeJson> formatTree(List<TreeJson> list) {
TreeJson root = new TreeJson();
TreeJson node = new TreeJson();
List<TreeJson> treelist = new ArrayList<TreeJson>();// 拼凑好的json格式的数据
List<TreeJson> parentnodes = new ArrayList<TreeJson>();// parentnodes存放所有的父节点
int k=0;
//for (int k = 0; k < parentList.size(); k++) {
if (list != null && list.size() > 0) {
root = list.get(0);
//循环遍历oracle树查询的所有节点
for (int i = 1; i < list.size(); i++) {
node = list.get(i);
if (node.getPid().equals(root.getId())) {
//为tree root 增加子节点
parentnodes.add(node);
// node.setChecked("true");
root.getChildren().add(node);
} else {//获取root子节点的孩子节点
//node.setChecked("true");
getChildrenNodes(parentnodes, node);
parentnodes.add(node);
}
}
treelist.add(root);
}
// }
return treelist;
}
private static void getChildrenNodes(List<TreeJson> parentnodes, TreeJson node) {
//循环遍历所有父节点和node进行匹配,确定父子关系
for (int i = parentnodes.size() - 1; i >= 0; i--) {
TreeJson pnode = parentnodes.get(i);
//如果是父子关系,为父节点增加子节点,退出for循环
if (pnode.getId().equals(node.getPid())) {
//pnode.setState("closed");//关闭二级树
pnode.getChildren().add(node);
return;
} else {
//如果不是父子关系,删除父节点栈里当前的节点,
//继续此次循环,直到确定父子关系或不存在退出for循环
parentnodes.remove(i);
}
}
}
public static long getSerialVersionUID() {
return serialVersionUID;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getIconCls() {
return iconCls;
}
public void setIconCls(String iconCls) {
this.iconCls = iconCls;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getChecked() {
return checked;
}
public void setChecked(String checked) {
this.checked = checked;
}
public List<TreeJson> getChildren() {
return children;
}
public void setChildren(List<TreeJson> children) {
this.children = children;
}
}
2、用户页面
<script type="text/javascript">
$(function(){
$('#treeul').tree({
checkbox:true,
url:'<%=request.getContextPath()%>/manage/role/roleresourcedata?roleId='+${roleId},
onLoadSuccess:function(){
//绑定权限
$.ajax({
cache:false,
dataType:'text',
success:function(data){
var array = data.split(',');
for(var i=0;i<array.length;i++)
{
var node = $('#treeul').tree('find',array[i]);
$('#treeul').tree('check',node.target);
}
}
})
}
});
});
function getChecked(){
var nodes = $('#treeul').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].id;
}
$("#rightIds").val(s);
return true;
}
</script>
---------------------------
还可以这样写:
$(function(){
$('#treeul').tree({
checkbox:true,
url:'<%=request.getContextPath()%>/manage/role/roleresourcedata?roleId='+${roleId},
onLoadSuccess:function(){
//绑定权限
$.ajax({
url:'getId.aspx?id='+v,
cache:false,
dataType:'text',
success:function(data){
var array = data.split(',');
for(var i=0;i<array.length;i++)
{
var node = $('#treeul').tree('find',array[i]);
$('#treeul').tree('check',node.target);
}
}
})
}
});
});
<form id="resourceForm" name="resourceForm" action="<%=request.getContextPath()%>/manage/role/resourcesave">
<input type="hidden" id="roleId" name="roleId" value="${roleId}">
<input type="hidden" id="rightIds" name="rightIds" value="">
<div class="easyui-panel" style="padding:5px">
<ul id="treeul" style="height: 300px;" class="easyui-tree" <%--data-options="url:'<%=request.getContextPath()%>/manage/role/roleresourcedata?roleId='+${roleId},method:'get',animate:true,checkbox:true"--%>></ul>
</div>
3、后台JSON
@RequestMapping(value = "/roleresourcedata")
public
@ResponseBody
String roleresourcedata(ModelMap model, HttpServletRequest request, HttpServletResponse response) throws Exception {
String roleId=request.getParameter("roleId");
StringBuilder jsonString =new StringBuilder();
List<TreeJson> list = rightService.findAll(roleId);
List<TreeJson> treeJsonList = TreeJson.formatTree(list);
net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(treeJsonList);
logger.info(" = ============== " +jsonArray.toString());
return jsonArray.toString();
}
相关推荐
EasyUI Tree 使用方式详解 EasyUI Tree 是一款功能強大且灵活的树状选择控件,它可以实现多种选择方式,例如多选、checkbox 勾选、新增或删除节点、拖曳移动节点等。以下是 EasyUI Tree 的使用方式详解。 一、套件...
### easyui tree扁平化扩展详解 #### 一、引言 在开发Web应用程序时,树形结构(Tree)是常见的UI组件之一,用于展示层级关系的数据。EasyUI Tree插件是基于jQuery的一个轻量级插件,它提供了一种简单的方式创建树...
EasyUI Tree是一款基于jQuery的轻量级用户界面库,它为开发者提供了丰富的树形结构组件。在标准的EasyUI Tree基础上,“easyui tree 改进版”进行了优化和增强,特别是加入了复选框选择功能,这使得用户在操作树形...
EasyUI Tree Combotree 的模糊所搜
在“easyui tree 三帧界面”这个主题中,我们主要讨论的是如何利用EasyUI的Tree组件来创建一个具有三个独立区域的界面,其中右侧区域可以动态展示图片和批注信息。 首先,EasyUI的Tree组件是一个强大的树形结构控件...
Tree组件是jQuery EasyUI中的一个重要部分,用于展示层级结构的数据,如目录、组织结构等。本篇文章将深入探讨如何实现jQuery EasyUI Tree的动态加载,并根据提供的标题和描述,分享一些可能的实现方法。 动态加载...
EasyUI 是一个基于 jQuery 的前端框架,主要用于构建用户界面,特别是对于企业级应用而言,它提供了丰富的组件,如对话框、表单、菜单、树形控件(Tree)和数据网格(DataGrid)等。在本项目中,"EasyUI tree 及 ...
《jQuery EasyUI Tree组件深度解析与实践应用》 在Web开发中,为了构建用户友好的交互界面,我们经常需要使用到各种UI库。jQuery EasyUI就是这样一个强大的前端框架,它基于jQuery,提供了丰富的组件,包括今天我们...
EasyUI 是一个基于 jQuery 的 UI 插件集合体,提供了丰富的界面组件,其中包括 Tree 组件。在本测试 demo 中,我们将深入探讨 EasyUI Tree 的使用方法以及相关文件的作用。 标题 "Easyui tree 测试demo" 指的是一个...
【权限管理EasyUI tree 及DateGrid 项目案例】是一个基于EasyUI框架的Web应用程序,主要目的是实现用户权限的登录管理和界面展示。EasyUI是一个基于jQuery的轻量级UI库,它提供了丰富的组件,简化了网页开发过程。在...
"EasyUI Tree树组件无限循环的解决方法" EasyUI Tree树组件是一种常用的树形结构控件,用于展示层级结构的数据。但是在使用EasyUI Tree树组件时,可能会遇到无限循环的问题,即点击最后一个节点时,会重新加载动态...
在这个“easyui tree 例子”中,我们可以探讨几个关键的知识点,包括EasyUI Tree的基本使用、数据绑定、事件处理以及如何与后端数据交互。 1. **EasyUI Tree的基本结构** EasyUI Tree的基本HTML结构通常包含`<ul>`...
4. **操作方法**:EasyUI Tree提供了丰富的API,如`tree.expand(node)`展开节点,`tree.collapse(node)`折叠节点,`tree.select(node)`选择节点,`tree.unselect(node)`取消选择,`tree.check(node, checked)`勾选或...
在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...
扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。 /** * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: * $("#treeId").tree("search", searchText); * ...
主要封装了easyui的表格删除添加修改查询以及tree和table和地图点的结合
EasyUI Tree与***结合使用实现权限树或目录树导航的功能,主要适用于构建网站后台管理系统中的导航模块,便于用户对网站的结构与权限进行管理。该实现方式利用了前端框架EasyUI提供的Tree控件和***的后台处理能力。 ...
在使用JQuery Easyui Tree组件时,我们常常需要监听用户对树形结构中节点的交互行为,例如当用户点击复选框时触发特定的操作。然而,Easyui Tree的API默认只提供了`onClick`事件,这对于处理复选框的选中状态并不...