easyui Tree后端工作

原创 已于 2022-05-10 15:00:32 修改
· 359 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#easyui #前端 #javascript #java #web

于 2022-05-09 23:17:41 首次发布
本文介绍了如何在easyui的Tree控件基础上优化，从数据库获取数据并展示在web页面上，同时添加了选项卡功能。当点击左侧菜单的子节点时，右侧会创建选项卡并加载对应页面。涉及的技术包括Java后端处理、数据库操作和easyui的Tree及选项卡组件使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 上期回顾

easyui的基本使用和布局https://blog.youkuaiyun.com/weixin_62270300/article/details/124600661?spm=1001.2014.3001.5501

上篇文章菜单搭建的数据是定死的 。今天这篇文件在上篇菜单搭建的基础上进行优化 将数据从数据库中提取出来 显示在页面上 如下图所示

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

 除了这一功能外 还增加了选项卡的功能   

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

选项卡的效果如下图所示：

 主要实现的功能：当左侧菜单的子节点被点击时右侧创建选项卡 并根据数据库中子节点的路径显示对应的页面

具体代码如下：

index.jsp(主页面) 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<script  rel="stylesheet" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script  rel="stylesheet" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>

</head>

<body class="easyui-layout">
	<div data-options="region:'north',title:'网站导航栏',collapsible:false"
		style="height: 100px;"></div>
	<div data-options="region:'west',title:'菜单',split:true"
		style="width: 20%;">
		<ul id="asideMenu"></ul>
	</div>
	<div data-options="region:'center',collapsible:false,border:false"
		style="padding: 5px; background: #eee;">
		<div id="mainTab" class="easyui-tabs"
			style="width: 100%; height: 100%;"></div>
	</div>
	<script>
 let mainTab = $('#mainTab')

  $('#asideMenu').tree({
      url: '${pageContext.request.contextPath}/permission.do', //远程数据的地址
      method: "POST",//访问方式
      lines: true, //显示虚线
      onClick(node) {
          //判断是否是父节点
          if (!node.attributes['pid']) {
              return
          }
          //判断是不是已经打开了
          if(mainTab.tabs('exists',node.text)){
              mainTab.tabs('select',node.text)
              return
          }
          mainTab.tabs('add', {
        	  closable:true,
        	  
              id:node.id,
              title: node.text,

             //content:"<iframe src='"+node.attributes['url']+"'></iframe>"
              href:node.attributes['url']
          });
      }
  });
		</script>
</body>


</html>

 PermissionServlet.java

package com.zking.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.biz.IPermissionBiz;
import com.zking.biz.impl.PermissionBizImpl;

@WebServlet("/permission.do")
public class PermissionServlet extends HttpServlet{

	private IPermissionBiz permissionBiz=new PermissionBizImpl(); 
	
	private ObjectMapper mapper=new ObjectMapper();
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//查询所有的菜单，将菜单写出去
		mapper.writeValue(resp.getOutputStream(), permissionBiz.listNodes());
	}
}

 TreeFactory.java

package com.zking.util;

import java.util.Arrays;
import java.util.List;
import java.util.Optional;
import java.util.stream.Collectors;

@SuppressWarnings("all")
public class TreeFactory {

    public static List<TreeNode> buildList(List<TreeNode> nodeList) {
        List<TreeNode> list = buildList(nodeList, "0");
        TreeNode root;
        if (!list.isEmpty()) {
            return list;
        } else {
            root = new TreeNode();
            root.setId("000");
            root.setParentId("-1");
            root.setHasParent(false);
            root.setHasChildren(true);
            root.setChecked(true);
            root.setChildren(list);
            root.setText("主菜单");
            root.setState("closed");
        }
        return Arrays.asList(root);
    }

    public static List<TreeNode> buildList(List<TreeNode> nodeList, String topMenuId) {
        return Optional.ofNullable(nodeList).map(list -> {
            list.forEach(item -> {
                list.stream().filter(i -> {
                    return i.getId().equals(item.getParentId());
                }).forEach(i -> {
                    i.setHasChildren(Boolean.TRUE);
                    i.getChildren().add(item);
                });
            });
            return list.stream().filter(i -> {
                return i.getParentId().equals(topMenuId);
            }).collect(Collectors.toList());
        }).get();
    }

}

TreeNode.java

package com.zking.util;


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


public class TreeNode {

    private String id;
    private String text;
    private String state;
    private Boolean checked = false;
    private Map<String, Object> attributes=new HashMap<>();
    private List<TreeNode> children = new ArrayList<>();
    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 String getState() {
		return state;
	}
	public void setState(String state) {
		this.state = state;
	}
	public Boolean getChecked() {
		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<TreeNode> getChildren() {
		return children;
	}
	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}
	public String getParentId() {
		return parentId;
	}
	public void setParentId(String parentId) {
		this.parentId = parentId;
	}
	public Boolean getHasParent() {
		return hasParent;
	}
	public void setHasParent(Boolean hasParent) {
		this.hasParent = hasParent;
	}
	public Boolean getHasChildren() {
		return hasChildren;
	}
	public void setHasChildren(Boolean hasChildren) {
		this.hasChildren = hasChildren;
	}
	public TreeNode(String id, String text, String state, Boolean checked, Map<String, Object> attributes,
			List<TreeNode> children, String parentId, Boolean hasParent, Boolean hasChildren) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.children = children;
		this.parentId = parentId;
		this.hasParent = hasParent;
		this.hasChildren = hasChildren;
	}

    public TreeNode() {
		// TODO Auto-generated constructor stub
	}
	@Override
	public String toString() {
		return "TreeNode [id=" + id + ", text=" + text + ", state=" + state + ", checked=" + checked + ", attributes="
				+ attributes + ", children=" + children + ", parentId=" + parentId + ", hasParent=" + hasParent
				+ ", hasChildren=" + hasChildren + "]";
	}
    
    
}

DBHelper.java 

package com.zking.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;


/**
 * 数据库驱动类
 * @author zjjt
 *
 */
public class DBHelper {

	//定义链接字符串
    private static final String URL = "jdbc:oracle:thin:@localhost:1521:orcl";

    //加载驱动
    static {
        try {
            Class.forName("oracle.jdbc.driver.OracleDriver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    //获得链接
    public static Connection getCon() {
        try {
            return DriverManager.getConnection(URL, "scott", "123123");
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    //关闭资源
    public static void close(Connection con, PreparedStatement ps, ResultSet rs) {
        try {
            if (con != null && !con.isClosed()) {
                con.close();
            }
            if (ps != null) {
                ps.close();
            }
            if (rs != null) {
                rs.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

  Permission.java

package com.zking.pojo;

public class Permission {

	    private Integer id;
	    private Integer pid;
	    private String text;
	    private String url;
		public Integer getId() {
			return id;
		}
		public void setId(Integer id) {
			this.id = id;
		}
		public Integer getPid() {
			return pid;
		}
		public void setPid(Integer pid) {
			this.pid = pid;
		}
		public String getText() {
			return text;
		}
		public void setText(String text) {
			this.text = text;
		}
		public String getUrl() {
			return url;
		}
		public void setUrl(String url) {
			this.url = url;
		}
		public Permission(Integer id, Integer pid, String text, String url) {
			super();
			this.id = id;
			this.pid = pid;
			this.text = text;
			this.url = url;
		}

	    public Permission() {
			// TODO Auto-generated constructor stub
		}
		@Override
		public String toString() {
			return "Permission [id=" + id + ", pid=" + pid + ", text=" + text + ", url=" + url + "]";
		}
	    
	    
}

IPermissionDao .java 

package com.zking.dao;

import java.util.List;

import com.zking.pojo.Permission;
import com.zking.util.TreeNode;

public interface IPermissionDao {

	List<Permission>list();
	List<TreeNode>listNodes();
}

PermissionDaoImpl.java 

package com.zking.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.dao.IPermissionDao;
import com.zking.pojo.Permission;
import com.zking.util.DBHelper;
import com.zking.util.TreeFactory;
import com.zking.util.TreeNode;

public class PermissionDaoImpl implements IPermissionDao{

	private Connection con;
	private PreparedStatement ps;
	private ResultSet rs;
	
	
	/**
	 * 查询所有permission
	 * @return
	 */
	 public List<Permission> list() {
	        List<Permission> list = new ArrayList<Permission>();
	        try {
	            con = DBHelper.getCon();
	            ps = con.prepareStatement("select * from bs_permission");
	            rs = ps.executeQuery();
	            while (rs.next()) {
	                Permission permission = new Permission();
	                permission.setId(rs.getInt(1));
	                permission.setPid(rs.getInt(2));
	                permission.setText(rs.getString(3));
	                permission.setUrl(rs.getString(4));
	                list.add(permission);
	            }
	        } catch (Exception e) {
	            e.printStackTrace();
	        } finally {
	            DBHelper.close(con, ps, rs);
	        }
	        return list;
	    }
	 
	   public List<TreeNode> listNodes() {
	        List<TreeNode> nodes = new ArrayList<TreeNode>();
	        //数据库中
	        List<Permission> list = list();
	        //将permission封装成node
	        for (Permission permission : list) {
	        
	            TreeNode node = new TreeNode();
	            node.setId(String.valueOf(permission.getId()));
	            node.setParentId(String.valueOf(permission.getPid()));
	            node.setText(permission.getText());
	            //把pid放到自定义属性中
	            node.getAttributes().put("pid",permission.getPid());
	            //把url放到自定义属性中
	            node.getAttributes().put("url",permission.getUrl());
	            nodes.add(node);
	        }
	        return TreeFactory.buildList(nodes, "0");
	    }
		
}

IPermissionBiz.java

package com.zking.biz;

import java.util.List;

import com.zking.pojo.Permission;
import com.zking.util.TreeNode;

public interface IPermissionBiz {

	List<Permission>list();
	List<TreeNode>listNodes();
}

PermissionBizImpl.java 

package com.zking.biz.impl;

import java.util.List;

import com.zking.biz.IPermissionBiz;
import com.zking.dao.IPermissionDao;
import com.zking.dao.impl.PermissionDaoImpl;
import com.zking.pojo.Permission;
import com.zking.util.TreeNode;

public class PermissionBizImpl implements IPermissionBiz{

	private IPermissionDao permissionDao=new PermissionDaoImpl();
	@Override
	public List<Permission> list() {
		return permissionDao.list();
	}

	@Override
	public List<TreeNode> listNodes() {
	
		return permissionDao.listNodes();
	}

}

数据库建表语句 

CREATE TABLE bs_permission
(
    id   number          DEFAULT NULL,
    pid  number          DEFAULT NULL,
    text varchar2(10) DEFAULT NULL,
    url  varchar2(255) DEFAULT NULL
);

create sequence seq_permission;

insert into bs_permission values(seq_permission.nextval,0,'会员管理','');
insert into bs_permission values(seq_permission.nextval,0,'商品管理','');
insert into bs_permission values(seq_permission.nextval,0,'订单管理','');
insert into bs_permission values(seq_permission.nextval,0,'数据报表','');
insert into bs_permission values(seq_permission.nextval,0,'系统管理','');

insert into bs_permission values(seq_permission.nextval,2,'会员卡充值','recharge.jsp');
insert into bs_permission values(seq_permission.nextval,2,'会员等级','level.jsp');
insert into bs_permission values(seq_permission.nextval,3,'状态管理','state.jsp');
insert into bs_permission values(seq_permission.nextval,3,'类目管理','topic.jsp');
insert into bs_permission values(seq_permission.nextval,3,'评论管理','comment.jsp');

select * from bs_permission;
commit

根据数据库定的路径建好页面 

今天的分享就要这结束啦！！✌

以上就是关于easyui Tree后端工作的一些内容！！📖

期待下次再见！！😊

時宜
关注
EasyUi的tree（树）后端实现
weixin_56069070的博客
09-12 490
前言：给大家讲解tree后端实现 码字不易，点个关注 转载请说明！ 开发工具:eclipse 目录 需要导的架包： 一、目标：将tree的死数据变成数据库中的读取方式 二、根据属性创建实体类（与数据库一致）以及dao类，action类... 三、配置conf文件夹下的xml文件 四、修改（static)的js文件的url 接着我上篇博客前端实现讲： 需要导的架包： 一、目标：将tree的死数据变成数据库中的读取方式 1.实体类对象转换为json串---》json对象...
easyui（Tree后端工作）
XiaoLiangyaya的博客
05-12 191
tree属性 每个节点都具备以下属性： id：节点ID，对加载远程数据很重要。 text：显示节点文本。 state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 children: 一个节点数组声明了若干节点。 使用MVC实现 ...
easyui-03 (Tree后端工作)
m0_63579794的博客
05-06 278
easyui-03 (Tree后端工作)
easyui.Tree后端工作
weixin_64938628的博客
05-11 322
前言:本篇文章下上一篇文章的基础上增加了一点功能，点击菜单的选项，会出现对应的内容。 目录 java代码 jsp代码 json代码 数据库代码 java代码 TreeFactory： package com.zking.util; import java.util.Arrays; import java.util.List; import java.util.Optional; import java.util.stream.Collectors; @Suppres...
easyUI.Tree后端工作
m0_67331668的博客
05-10 168
上次我们讲了关于easyUI的基本知识并做了一个简单的首页，但是菜单栏我们是一个固定的，并且点击没有界面，所以今天我们就来做一个连接数据库的菜单栏。 项目目录： 效果图： 数据库数据： CREATE TABLE bs_permission ( id number DEFAULT NULL, pid number DEFAULT NULL, text varchar2(10) DEFAULT NULL,..
EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例
10-26
在本实例中，***后端会将从数据库查询到的权限树数据组织成JSON格式的数据，然后通过ashx文件返回给前端的EasyUI Tree控件。前端JavaScript代码利用jQuery等库解析JSON数据，动态渲染出树形结构。 知识点四：动态...
jquery使用EasyUI Tree异步加载JSON数据（生成树）
10-20
本文将详细介绍如何使用jQuery结合EasyUI库中的Tree组件实现对JSON数据的异步加载以生成树状结构，并对实现细节进行深入讲解。这个技术点在现代Web开发中非常常见，特别是在需要处理具有层级关系的数据时，如菜单、...
easyui tree扁平化扩展，不用再为children嵌套结构烦恼
08-11
当后端返回的数据是以扁平化形式存储时（即没有明确的`children`属性），我们需要对其进行转换才能适应EasyUI Tree的要求。这可能会导致额外的编码工作，尤其是在处理大数据量时效率低下。因此，我们需要一种更高效...
轻松掌握easyUI与后端SSM框架的数据交互
- easyUI提供了一系列的UI组件，如DataGrid、Dialog、Tree、Tabs等。 - easyUI支持响应式设计，能够在不同设备上良好显示。 - easyUI组件的使用通常依赖于jQuery和jQuery UI库，因为easyUI的很多功能是建立在这些...
EasyUI Tree 树
Charge8的博客
10-07 6882
  一、EasyUI Tree 树：http://www.jeasyui.net/plugins/185.html 树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。 用法 树（tree）定义在 &lt;ul&gt; 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 &lt;li&gt; 元素。 属性 每个节点可以包括下列属性：...
easy ui tree 前后端树形结构项目 权限管理demo
07-19
这是基于 easy ui tree 树形结构的一个demo权限管理 前后端代码完整 可直接运行 你可以根据我写的代码自行修改 里面有我的注释 要是有不懂的可以问我 我会尽可能的回复你
easyui的tree（静态树/动态树）
qq_45547474的博客
06-21 3831
easyui的tree一、tree简介二、tree组件工具类的实现思路三、tree组件工具类的使用四、总结二级目录三级目录 一、tree简介 二、tree组件工具类的实现思路 三、tree组件工具类的使用 四、总结 二级目录 三级目录 ...
Easy-UI Tree的生成
写博客只为学习
06-18 167
树形结构中checkbox="true"表示树节点是可以选择。 [code="html"] [/code] [code="java"] /** * *@User :Test *@date :2014-6-18 下午03:19:28 *@return :Object *@userFor : 生...
easyUI之tree
Cat_Jay_Fish的博客
09-10 370
课程目标 需求点： 1.点击左侧侧显示右侧Tab 1.1给菜单添加点击事件 1.2调用tabs选项卡，打开对应的页面 选项卡打开 选项卡对应的页面展示 2.不能打开重复的Tab 拿到目前打开的tabs选项卡，与将要打开的选项卡做对比（exists） 存在true:不打开 不存在false:d打开 ...
Easy UI Tree
yangm
06-22 852
Easy UI Tree 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 API 根据API文档描述，easy UI Tree 由用户先建立一个空的树，然后指定一个服务端获取json数据来填充树对象。 eg ：&amp;amp;amp;lt;ul class=&amp;amp;quot;easyui-tree&amp;amp;quot; data-options=&amp;amp;quot;url:'/
easy ui tree java_JQuery Easy Ui （Tree树）详解
weixin_33132819的博客
02-13 309
转自：http://www.fwqtg.net/jquery-easy-ui-%EF%BC%88tree%E6%A0%91%EF%BC%89%E8%AF%A6%E8%A7%A3.html同志们可以想一想这个问题啊！但是咱们今天的主题是JQuery Easy Ui,先抛开上面的小故事，进入咱们今天的正题！以前总是听别人说JQuery Easy Ui，但是我呢，也么有深刻的研究过，也不清楚JQuery...
easy ui Tree 的使用
贾克斯
08-08 637
MQ发送接受消息，获取后台返回的数据，然后自己进行封装成tree里面所需要的json格式！里面主要用到异步加载tree的方法！ $("#tree").tree({           data:jsonstring,         //显示加减号           lines:true,           animate:true,           //展开前       
easyui源码翻译1.32--Tree（树）
weixin_30800807的博客
01-01 368
前言 使用$.fn.tree.defaults重写默认值对象。下载该插件翻译源码 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 源码 /** * jQuery EasyUI 1.3.2 * *翻译：qq 1364386878 */ (function ($) { //渲染样式 ...
easyui tree
weixin_43942765的博客
12-18 246
小编近日又被需求排山倒海式的挤满了时间，不过往往也在这个时候，小编学习能力也会跟着进步。今天粘贴一个easyui tree的使用，这个最难得地方在于哪里呢？先吊吊你的胃口，一步步来，ready go！！！ <table style="margin-top:2px;"> <tr> <td> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值