easyuiTree组件后台实现

最新推荐文章于 2020-06-26 23:46:28 发布
最新推荐文章于 2020-06-26 23:46:28 发布
阅读量176 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47252566/article/details/106894542
版权

easyuiTree组件后台实现

Tree

概念

树控件是在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

示例演示

首先jsp页面有一ul用于展现tree

<ul id="tt"></ul>

加载Tree
在js目录下新建一个index.js
Webcontent目录下导入{}tree_data1.json
在这里插入图片描述

$(function(){
	$('#tt').tree({    
	    url:'tree_data1.json'   
	});  
}
)

entity包：需要封装对象tree
数据库字段名
在这里插入图片描述
Permission 实体类

package com.tanjie.entity;

public class Permission {

	private long id;
	private String name;
	private String description;
	private String url;
	private long pid;
	private int ismenu;
	private long displayno;
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public long getPid() {
		return pid;
	}
	public void setPid(long pid) {
		this.pid = pid;
	}
	public int getIsmenu() {
		return ismenu;
	}
	public void setIsmenu(int ismenu) {
		this.ismenu = ismenu;
	}
	public long getDisplayno() {
		return displayno;
	}
	public void setDisplayno(long displayno) {
		this.displayno = displayno;
	}
	@Override
	public String toString() {
		return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
				+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
	}
}

vo包：TreeVo类
id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

package com.tanjie.vo;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;


public class TreeVo<T> {
	/**
	 * 节点ID
	 */
	private String id;
	/**
	 * 显示节点文本
	 */
	private String text;
	/**
	 * 节点状态，open closed
	 */
	private Map<String, Object> state;
	/**
	 * 节点是否被选中 true false
	 */
	private boolean checked = false;
	/**
	 * 节点属性
	 */
	private Map<String, Object> attributes;

	/**
	 * 节点的子节点
	 */
	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();

	/**
	 * 父ID
	 */
	private String parentId;
	/**
	 * 是否有父节点
	 */
	private boolean hasParent = false;
	/**
	 * 是否有子节点
	 */
	private boolean hasChildren = false;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public Map<String, Object> getState() {
		return state;
	}

	public void setState(Map<String, Object> state) {
		this.state = state;
	}

	public boolean isChecked() {
		return checked;
	}

	public void setChecked(boolean checked) {
		this.checked = checked;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<TreeVo<T>> getChildren() {
		return children;
	}

	public void setChildren(List<TreeVo<T>> children) {
		this.children = children;
	}

	public boolean isHasParent() {
		return hasParent;
	}

	public void setHasParent(boolean isParent) {
		this.hasParent = isParent;
	}

	public boolean isHasChildren() {
		return hasChildren;
	}

	public void setChildren(boolean isChildren) {
		this.hasChildren = isChildren;
	}

	public String getParentId() {
		return parentId;
	}

	public void setParentId(String parentId) {
		this.parentId = parentId;
	}

	public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.children = children;
		this.hasParent = isParent;
		this.hasChildren = isChildren;
		this.parentId = parentID;
	}

	public TreeVo() {
		super();
	}
}

dao包：PermissionDao类

package com.tanjie.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.tanjie.entity.Permission;
import com.tanjie.util.BaseDao;
import com.tanjie.util.BuildTree;
import com.tanjie.util.PageBean;
import com.tanjie.vo.TreeVo;

public class PermissionDao extends BaseDao<Permission> {

	public List<Permission> list(Permission permission, PageBean pageBean)
			throws Exception, IllegalAccessException, SQLException {
		String sql = "select * from t_easyui_permission";
		return super.executeQuery(sql, Permission.class, pageBean);
	}

	public static void main(String[] args) throws IllegalAccessException, SQLException, Exception {
		PermissionDao permission = new PermissionDao();
		List<Permission> list = permission.list(null, null);
//		通过工具类完成指定格式的输出
		List<TreeVo<Permission>> nodes=new ArrayList<TreeVo<Permission>>();
//		Permission的格式是不满足easyui的tree组件的展现 的数据格式
//		目的：将List<Permission>转换成List<TreeVo<Permission>>
//		实现：将List<Permission>得到的单个Permission的转换成TreeVo，将TreeVo加入到nodes
		
		TreeVo treeVo=null;
		for (Permission p : list) {
			treeVo=new TreeVo<>();
			treeVo.setId(p.getId()+"");
			treeVo.setText(p.getName());
			treeVo.setParentId(p.getPid()+"");
			Map<String, Object> attributes=new HashMap<String, Object>();
			attributes.put("self", p);
			treeVo.setAttributes(attributes);
			nodes.add(treeVo);
		}
		
		TreeVo<Permission> parent = BuildTree.build(nodes);
		ObjectMapper om=new ObjectMapper();
		String str = om.writeValueAsString(parent);
		System.out.println(str);
	}
}

运行得到一串对象数组复制到json在线解析格式化
在这里插入图片描述
在这里插入图片描述
把格式化的代码复制到{}tree_data1.json
注意要加上[]

[{
	"id": "000",
	"text": "顶级节点",
	"state": {
		"opened": true
	},
	"checked": true,
	"attributes": null,
	"children": [{
		"id": "1",
		"text": "书籍管理",
		"state": null,
		"checked": false,
		"attributes": {
			"self": {
				"id": 1,
				"name": "书籍管理",
				"description": "书籍管理",
				"url": null,
				"pid": 0,
				"ismenu": 1,
				"displayno": 0
			}
		},
		"children": [{
			"id": "2",
			"text": "新增（crud）",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 2,
					"name": "新增（crud）",
					"description": "书籍新增",
					"url": "/bg/addBook.jsp",
					"pid": 1,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "1",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "3",
			"text": "未上架",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 3,
					"name": "未上架",
					"description": "未上架书籍",
					"url": "/bg/listBook1.jsp",
					"pid": 1,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "1",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "4",
			"text": "已上架",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 4,
					"name": "已上架",
					"description": "已上架书籍",
					"url": "/bg/listBook2.jsp",
					"pid": 1,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "1",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "5",
			"text": "已下架",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 5,
					"name": "已下架",
					"description": "已下架书籍",
					"url": "/bg/listBook3.jsp",
					"pid": 1,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "1",
			"hasParent": true,
			"hasChildren": false
		}],
		"parentId": "0",
		"hasParent": false,
		"hasChildren": true
	}, {
		"id": "6",
		"text": "订单管理",
		"state": null,
		"checked": false,
		"attributes": {
			"self": {
				"id": 6,
				"name": "订单管理",
				"description": "商家的订单管理模块",
				"url": null,
				"pid": 0,
				"ismenu": 1,
				"displayno": 0
			}
		},
		"children": [{
			"id": "7",
			"text": "未发货",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 7,
					"name": "未发货",
					"description": "未发货订单",
					"url": "/bg/listOrder1.jsp",
					"pid": 6,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "6",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "8",
			"text": "已发货",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 8,
					"name": "已发货",
					"description": "已发货订单",
					"url": "/bg/listOrder2.jsp",
					"pid": 6,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "6",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "9",
			"text": "已签收",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 9,
					"name": "已签收",
					"description": "已签收订单",
					"url": "/bg/listOrder3.jsp",
					"pid": 6,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "6",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "14",
			"text": "订单项",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 14,
					"name": "订单项",
					"description": "订单明细",
					"url": "/bg/listOrderItem.jsp",
					"pid": 6,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "6",
			"hasParent": true,
			"hasChildren": false
		}],
		"parentId": "0",
		"hasParent": false,
		"hasChildren": true
	}, {
		"id": "10",
		"text": "订单管理",
		"state": null,
		"checked": false,
		"attributes": {
			"self": {
				"id": 10,
				"name": "订单管理",
				"description": "会员的订单管理模块",
				"url": "",
				"pid": 0,
				"ismenu": 1,
				"displayno": 0
			}
		},
		"children": [{
			"id": "11",
			"text": "未发货",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 11,
					"name": "未发货",
					"description": "未发货订单",
					"url": "/bg/listMyOrder1.jsp",
					"pid": 10,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "10",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "12",
			"text": "已发货",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 12,
					"name": "已发货",
					"description": "已发货订单",
					"url": "/bg/listMyOrder2.jsp",
					"pid": 10,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "10",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "13",
			"text": "已签收",
			"state": null,
			"checked": false,
			"attributes": {
				"self": {
					"id": 13,
					"name": "已签收",
					"description": "已签收订单",
					"url": "/bg/listMyOrder3.jsp",
					"pid": 10,
					"ismenu": 1,
					"displayno": 0
				}
			},
			"children": [],
			"parentId": "10",
			"hasParent": true,
			"hasChildren": false
		}],
		"parentId": "0",
		"hasParent": false,
		"hasChildren": true
	}],
	"parentId": "-1",
	"hasParent": false,
	"hasChildren": true
}]

jsp运行结果如下：
在这里插入图片描述

花千邪
关注
easyUI的tree后台实现
小七
06-22 493
easyUI的tree后台实现前言一、easyui入门手写前端框架图二、实现tree效果 前言 今天所要实现的效果是tree的结构，实现的功能展开，折叠 需要实现的效果图 一、easyui入门手写前端框架图 1、首先我们应该想写出一个前端展示出来大致框架 导入一个文件jquery-easyui-1.5.1 想要调用jquery-easyui-1.5.1中的样式，应该要的代码 有些人存放的路径不同，那么久改一下垃圾就可以了 <!-- 全局样式 --> <link rel="stylesh
easyui tree后台实现
weixin_45576466的博客
06-23 454
tree后台实现导入sql文件导入所需jar包导入util所需的工具类vo 下 TreeVotree_data1.jsonjs 代码与后台进行交互permissionDao运行结果 接上篇博客：easyui入门 导入sql文件 获取sql文件链接: t_easyui_permission表 提取码: bdv3 注：mysql 数据库文件 导入所需jar包 jar包提取链接：所需jar包 提取码: zgsu 导入util所需的工具类 util工具类文件获取链接: https://pan.baidu.com
Springmvc+easyuitree数据显示实例后台代码，完整后台代码
09-09
前台，js代码：function treeload(){ //树加载 $("#ttt").tree({ url:"tree_data2.do", }); }，通过调用Springmvc从后台返回tree
EasyUI 下拉菜单 下拉树 模糊搜索
10-29
支持下拉菜单 下拉树 模糊搜索,支持中间字段的匹配
EasyUI Tree Combotree 模糊搜索
06-01
EasyUI Tree Combotree 的模糊所搜
easyuiTree组件
m0_46890027的博客
06-26 156
直接上案例 实现的效果图： mysql表： 导入所打包好的jar包： 实体类:以五个字段实现效果 package com.leiliang.entity; public class Menu { private String serialNo; private String menuid; private String menuname; private String menuURL; private String parentid; public Str...
easyuiTree实例
03-06
项目是关于搭建easyui+springmvc+mybatis+mysql 来实现管理系统的功能，其中还使用了funcharts来实现报表的形式。里面有sql文件，导入到数据库中，加载好项目，就可以运行。
easyui1.4+easyuitree+springmvc4.0的优质可重用动态前端框架，（有SQL能运行，完整可重用做项目，本人已用它开发完成电商网站后台）
12-19
EasyUI1.4是一个轻量级的JavaScript库，它基于jQuery，提供了丰富的UI组件，如表格（datagrid）、对话框（dialog）、表单（form）等，简化了前端页面的构建。它的主要特点包括响应式设计、主题支持和易于定制，使得...
java后台构造easyui的tree数据的一种方法
菜鸟一名
02-11 3434
最近在用easyui做一个权限管理系统，需要用到tree，后台构造json数据的时候总是不能很好的适应各种 情况，于是上网看了很多的例子，有几个能用，效率也比自己写的高，然后再加上自己的的业务需求改写了 一部分，就变成下面的代码了 public List getResource(Connection conn, StringBuffer sql,String id,String type)
jQuery EasyUI tree增加搜索功能的实现方法
12-13
扩展jQuery EasyUI tree搜索树节点的方法，使其支持节点名称的模糊匹配，将不匹配的节点隐藏。 /** * 1）扩展jquery easyui tree的节点检索方法。使用方法如下： * $("#treeId").tree("search", searchText); * 其中，treeId为easyui tree的根UL元素的ID，searchText为检索的文本。 * 如果searchText为空或""，将恢复展示所有节点为正常状态 */ (function($) { $.extend($.fn.tree.methods, { /** * 扩展
Day45 EasyUI 搭建后台登录界面和管理系统主界面
新世界的大门
03-06 9105
EasyUI介绍 1.EasuyUI介绍： EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。 特点： 基于jQuery的一个UI插件 2、EasyUI官网： http://www.jeasyui.com 3、EasyUI使用目录介绍： ...
关于easyUI-tree组件后台代码的优化
chenqk_123的专栏
12-28 3020
之前写的关于easyUI-tree的使用，在后台代码的呈现上有很多的瑕疵，这次改进了一下代码。 1.新增Tree的VO类 每一个实体类都应该有一个与之对应的VO，来应对页面的多变需求，以达到不修改数据库就能来满足页面结构。所以我们需要额外定义VO类，来处理不同的页面需求。 Tree也是一样的，我们来看看TreeVo的定义： package com.chenqk.spring
easyui tree 对节点进行添加、修改、删除操作。
热门推荐
qq_37901001的博客
06-29 1万+
1. Tree的初始化           由页面静态加载的，大家都知道了，easyui API也有，我就不再赘述了，这里主要是怎么通过ajax后台请求数据，并生成tree。        我们一般都是会配合一个登录系统来实现，用户登录之后会出现tree的页面，在页面初始化的时候加载tree，就需要onload时间来实现，或者使用jQuery的$(function (){})；也能实现。     ...
使用 EasyUI 写一些后台常用的界面
IT小村
03-04 9462
一、前言EasyUI是比较早接触的 UI 框架，使用的时间也较长，主要是用来做后台管理界面的，减少开发成本、时间、难度，但是界面也是相当简陋的。下面列举一些常用的界面，如主页、CRUD、登录界面等二、代码与效果1、主页：① 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>l
easyui tree 模糊搜索
Cool的博客
06-26 1845
/** * 1）扩展jquery easyui tree的节点检索方法。使用方法如下： * $("#treeId").tree("search", searchText); * 其中，treeId为easyui tree的根UL元素的ID，searchText为检索的文本。 * 如果searchText为空或""，将恢复展示所有节点为正常状态 */ (function($) { ...
easyui tree根据输入框的值模糊匹配树节点，高亮显示
高彩琼的博客
03-25 1449
效果图如下： 刚开始用easyui创建树，通过URL请求数据，定义一个全局变量datas，在onLoadSuccess(数据加载成功时执行)获取到url返回的json字符串，针对json字符串进行处理，然后将获得目标数据重新挂载到树上，思路是这样，没想到的是，onLoadSuccess事件执行两次，按照百度的结果，去掉，class='easyui-tree'还是加载两次，目标数据挂载到树节...
EasyUI Tree Checkbox禁用状态设置与动态控制
在初始化Tree组件时，设置了`checkbox: true`，这意味着默认情况下，用户可以勾选树中的节点。然而，为了实现当数据加载完成后再禁止勾选，作者创建了一个`onBeforeCheck`事件处理器，这个处理器在用户尝试勾选节点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值