EasyUI，tabs选项卡，tree目录菜单

最新推荐文章于 2024-08-03 20:55:05 发布

赤诚&

最新推荐文章于 2024-08-03 20:55:05 发布

阅读量271

点赞数 2

分类专栏： WEB 文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/weixin_67150631/article/details/124644198

版权

WEB 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

嘿黑嗨，我又来了哦，今天给大家来了这个EasyUI的tabs选项卡和tree树的数据库读取，让我们一起来康康吧！
小编编码不易，留个赞在走吧！

选项卡tabs

tabs
创键代码

div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>

面板属性
tabs2
事件
tABS3
方法
tabs4
选项卡面板属性，方法
tabs5

数据库读取tree

这里其实是对我上一篇的博客的优化，因为上一篇是写死的，现在就很灵活了
EasyUI的tree树，上一篇博客
在这里，只提供了关键代码
index

<%@ 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>
<script
	src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/icon.css">

</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'导航栏',collapsible:false" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版本信息',collapsible:false" style="height:100px;"></div>   
    <div data-options="region:'west',title:'菜单',split:true" style="width:12%;">
    <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: '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', {
                id:node.id,
                title: node.text,
                content:"<iframe src='"+node.attributes['url']+"'></iframe>"
            });
        }
    });
</script>
</body>
</html>

Treefactory

package com.java.uitl;

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

import com.java.pojo.TreeNode;

@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();
	}

}

Permission
自己提供get set 有参无参方法

private Integer id;
	private Integer pid;
	private String text;
	private String url;

TreeNode
自己提供get set 有参无参方法

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;

dao层
PermissionDaoImpl

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.pojo.TreeNode;
import com.zking.uitl.DBHelper;
import com.zking.uitl.Treefactory;

public class PermissionDaoImpl implements IPermissionDao {

	private Connection con;
	private PreparedStatement ps;
	private ResultSet rs;

	@Override
	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 p = new Permission();
				p.setId(rs.getInt(1));
				p.setPid(rs.getInt(2));
				p.setText(rs.getString(3));
				p.setUrl(rs.getString(4));
				list.add(p);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.close(con, ps, rs);
		}
		return list;
	}

	@Override
	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");
		
	}

}

最后一个servlet
PermissionServlet

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());
	}

}