easyui tree后台实现


接上篇博客: easyui入门

导入sql文件

获取sql文件链接: t_easyui_permission表
提取码: bdv3
注:mysql 数据库文件

导入所需jar包

在这里插入图片描述
jar包提取链接:所需jar包
提取码: zgsu

导入util所需的工具类

在这里插入图片描述
util工具类文件获取链接: https://pan.baidu.com/s/1omvxMEUl8UCEGC66-58h0g
提取码: 8b34

vo 下 TreeVo

package com.chendongyang.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();
	}

}

tree_data1.json

去上一篇博客把jquery-easyui-1.5.1 > demo>tree 中找到 tree_data1.json文件复制到 webContent下

tree_data1.json代码:

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

js 代码与后台进行交互

在这里插入图片描述

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

permissionDao

package com.chendongyang.dao;

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

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

import sun.reflect.generics.tree.Tree;

public class PermissionDao extends BaseDao<Permission> {
	public List<Permission> list(Permission permission,PageBean pageBean) throws SQLException, Exception{
		String sql="select * from t_easyui_permission";
		return super.executeQuery(sql, Permission.class, pageBean);
	}
	public static void main(String[] args) throws SQLException, Exception {
		PermissionDao permissionDao=new PermissionDao();
		List<Permission> list = permissionDao.list(null, null);
//		通过工具类完成制定格式的输出
		List<TreeVo<Permission>> nodes=new ArrayList<TreeVo<Permission>>();
		// Permission 的格式不满足easyui的tree组件的展示的数据格式的
//		目的:将list<Permission>转换成List<TreeVo<T>
//		实现:将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 jsonstr = om.writeValueAsString(parent);
		System.out.println(jsonstr);
	}
}

运行结果

在这里插入图片描述
如果在控制台看不方便的话 可以去下图网站 把控制台输出的代码复制到里面 然后格式化

链接 :json在线
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui是一个基于jQuery的UI框架,提供了丰富的界面组件和交互效果,方便开发人员快速构建Web页面。而treeeasyui中的一个树状组件,用于展示层级关系的数据。 在使用easyui tree进行java开发时,我们首先需要引入easyui的相关依赖包,并在页面中引入相应的脚本和样式文件。然后,我们可以通过在页面中定义一个div容器,将tree组件渲染在页面上。 在java后台代码中,我们需要提供数据给tree组件进行展示。一般来说,我们可以通过数据库查询、接口调用等方式获取数据,并将数据转换为json格式。然后,将json数据返回给前端页面,供tree组件使用。 接下来,我们需要在前端页面中初始化并配置tree组件。通过调用easyui提供的API,我们可以设置tree的数据源、展开图标、折叠图标、节点点击事件等。可以根据具体需求对tree进行自定义配置,以满足我们的业务需求。 在页面渲染完成后,easyui tree组件会自动将数据渲染为树状结构,并提供相应的交互功能,比如展开收起节点、选中节点等。我们可以通过对tree组件的事件进行监听,实现特定操作,比如点击节点后加载子节点、在节点上右键弹出菜单等。 总之,通过使用easyui tree组件,结合java后台开发,我们可以方便地实现树形结构的展示和交互操作,提升用户体验,简化开发流程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值