EasyUi03(tree后台工作)

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量663 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67294268/article/details/124617416
版权

今天讲的是tree后台工作，要连接了oracle数据库

这个是页面的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入公共页面  包含 -->
<%@ include file="common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//页面载入函数
	$(function() {
		//加载树的数据   
		$('#myTree').tree({
			url : ctx + '/module.do', //请求地址
			animate : true,//展开或者收缩节点显示动画效果
			onDblClick : function(node) {//节点=对象
				//alert(node.text+" "+node.id+"  "+node.state);  // 在用户点击的时候提示
				//alert(node.iconCls);
				//alert(node.url);
				//判断是否是子节点
				var nodes = $('#myTree').tree('getChildren', node.target); // get checked nodes
				//alert(nodes.length);
				if (nodes.length == 0) {//说明没有子节点
					//判断选项卡是否存在
					var f = $('#myTab').tabs('exists', node.text);
					if (!f) {//说明不存在
						//就新增一个选项卡
						$('#myTab').tabs('add', { //  iconCls:'icon-mini-refresh' 
							title : node.text, //标题
							content : '<iframe scrolling="no" frameborder="0" src="'+node.url+'" width="100%" height="100%"></iframe>', //内容  
							closable : true, //是否可关闭
							iconCls:node.iconCls //图标

						});
					} else {//说明存在就让其选中
						$('#myTab').tabs('select', node.text);
					}
				}

			}

		});

	})
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',split:true"
		style="height: 85px; text-align: center;">
		<h1>书籍后台管理</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 68px; text-align: center;">
		<h4>&copy;沉山工作室版权所有,违权使用必究</h4>
	</div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 150px;">
		<!-- 左侧tree控件  -->
		<ul id="myTree" class="easyui-tree">
		</ul>

	</div>
	<div data-options="region:'center'"
		style="padding: 5px; background: #fff;">
		<!-- 中间的tabs控件 -->
		<div id="myTab" data-options="pill:true" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div data-options="iconCls:'icon-user-home'" title="首页" style="padding: 10px; display: none;">
				<img src="images/lb1.png" style="width: 100%; height: 100%;" />
			</div>

		</div>


	</div>
</body>

</html>

 递归自己调用自己

 业务逻辑层

package com.zking.biz;

import java.util.List;

import com.zking.dao.IModuleDao;
import com.zking.dao.ModuleDao;
import com.zking.entity.Module;

/**
 *业务逻辑层
 *@author Tao
 *@date 2022年5月6日下午4:59:58
 *
 */
public class ModuleBiz implements IModuleBiz{

	//调用数据库访问层
	IModuleDao imd=new ModuleDao();
	
	@Override
	public List<Module> getAllByPid(int pid) {
	List<Module> ls=imd.getAllByPid(pid);
	//循环遍历
	for (Module m : ls) {
		//什么时候有子节点
		if(m.getPid()==-1) {//说明是父节点
			//递归  自己调用自己   填充其子节点集合
			m.setChildren(getAllByPid(m.getId()));
		}
	}
		return ls;
	}
		public static void main(String[] args) {
			IModuleBiz imb=new ModuleBiz();
			System.out.println(imb.getAllByPid(22));
		}
}

 

这个是表示层的代码 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入公共页面  包含 -->
<%@ include file="common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//页面载入函数
	$(function() {
		//加载树的数据   
		$('#myTree').tree({
			url : ctx + '/module.do', //请求地址
			animate : true,//展开或者收缩节点显示动画效果
			onDblClick : function(node) {//节点=对象
				//alert(node.text+" "+node.id+"  "+node.state);  // 在用户点击的时候提示
				//alert(node.iconCls);
				//alert(node.url);
				//判断是否是子节点
				var nodes = $('#myTree').tree('getChildren', node.target); // get checked nodes
				//alert(nodes.length);
				if (nodes.length == 0) {//说明没有子节点
					//判断选项卡是否存在
					var f = $('#myTab').tabs('exists', node.text);
					if (!f) {//说明不存在
						//就新增一个选项卡
						$('#myTab').tabs('add', { //  iconCls:'icon-mini-refresh' 
							title : node.text, //标题
							content : '<iframe scrolling="no" frameborder="0" src="'+node.url+'" width="100%" height="100%"></iframe>', //内容  
							closable : true, //是否可关闭
							iconCls:node.iconCls //图标

						});
					} else {//说明存在就让其选中
						$('#myTab').tabs('select', node.text);
					}
				}

			}

		});

	})
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',split:true"
		style="height: 85px; text-align: center;">
		<h1>书籍后台管理</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 68px; text-align: center;">
		<h4>&copy;沉山工作室版权所有,违权使用必究</h4>
	</div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 150px;">
		<!-- 左侧tree控件  -->
		<ul id="myTree" class="easyui-tree">
		</ul>

	</div>
	<div data-options="region:'center'"
		style="padding: 5px; background: #fff;">
		<!-- 中间的tabs控件 -->
		<div id="myTab" data-options="pill:true" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div data-options="iconCls:'icon-user-home'" title="首页" style="padding: 10px; display: none;">
				<img src="images/lb1.png" style="width: 100%; height: 100%;" />
			</div>

		</div>


	</div>
</body>

</html>

这个是数据库的数据

 

 

效果如下:

 

 

m0_67294268
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyUI的tree后台实现
小七
06-22 413
easyUI的tree后台实现前言一、easyui入门手写前端框架图二、实现tree效果 前言 今天所要实现的效果是tree的结构，实现的功能展开，折叠 需要实现的效果图 一、easyui入门手写前端框架图 1、首先我们应该想写出一个前端展示出来大致框架 导入一个文件jquery-easyui-1.5.1 想要调用jquery-easyui-1.5.1中的样式，应该要的代码 有些人存放的路径不同，那么久改一下垃圾就可以了 <!-- 全局样式 --> <link rel="stylesh
EasyUI【Tree前端工作】
m0_64522859的博客
05-07 568
1.全局path定义 base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面 <base href = "${pageContext.request.servletContext.contextPath}/static/"> var globalPath = "${pageContext.request.servletContext.contextPath}"; 2.页面缓存 <meta htt...
easyui 03 tree后台工作
weixin_67338832的博客
05-07 88
实体类 package entil; import java.util.ArrayList; import java.util.List; public class Module { private int id; private int pid; private String text; private String iconCls; private String url; private String sort; private List<Module> ch
easyui(tree后台工作)
weixin_67677668的博客
05-05 86
一、servlet package com.zking.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.s
easyui03(tree后台工作)
m0_67258478的博客
05-08 114
<script type="text/javascript"> //页面载入函数 $(function() { //加载树的数据 $('#myTree').tree({ url : cp + '/module.do',//请求地址 index.do animate : true,//展开或收缩节点显示动画效果 onDblClick : function(node) {//节点 //alert(node.text); // 在用户点击的时候提示 .
easyui tree json php,easyui tree后台传json处理问题
weixin_39613839的博客
03-28 293
一、tree json格式[{"id": 1,"text": "权限管理","iconCls": "icon-feed","checked": false,"attributes": {"url": "#123"},"children": [{"id": 2,"text": "用户管理","iconCls": "icon-users","checked": false,"attributes": ...
easyUI03（tree后台工作）
m12120426的博客
05-08 489
上次我们是从JSON中拿到的数据，今天从数据库拿 tree属性 每个节点都具备以下属性： id：节点ID，对加载远程数据很重要。 text：显示节点文本。 state：节点状态，'open'或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 children: 一个节点数组声明了若干节点。 使用MVC实现 根.
easyui 03（tree后台工作）
qq_44247968的博客
05-08 81
tree属性 每个节点都具备以下属性： id：节点ID，对加载远程数据很重要。 text：显示节点文本。 state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 children: 一个节点数组声明了若干节点。 使用MVC实现 根据以上属性，实体类的属性就可以确定了 在数据库中建一个 tb_module 功能模块表 实体类：.
easyui的tree后台实现
TZyybhs的博客
06-21 216
tree后台实现 接上一次的easyui入门，来实现tree的后台 在lib包中导入jar包 jsp代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g
jquery-easyui-tree学习
10-09
总的来说，jQuery EasyUI Tree组件以其简洁的API和丰富的功能，大大简化了开发者构建树形结构的工作。通过熟练掌握其用法和扩展技巧，我们可以构建出更富有交互性和用户体验的Web应用。在实际项目中，应结合具体需求...
easyui后台html后台
07-30
在“easyui后台html后台”这个主题中，我们将探讨如何使用 EasyUI 和 HTML 在后台构建高效的工作环境。 1. **EasyUI 基础**： - **组件库**：EasyUI 提供了一系列预先设计和封装好的 UI 组件，如按钮、表单、布局...
构造EasyUI-Tree代码
08-01
前台代码可直接复制粘贴，js代码需要修改url路径，后台代码主要需要修改泛型集合和foreach循环中的内容。
easyui-tree-diasbleCheckbox
08-23
标题"easyui-tree-diasbleCheckbox"暗示了我们关注的是EasyUI树形控件中的一个特性，即禁用复选框（checkbox）。在EasyUI的树形控件中，每个节点可以配置复选框，用户可以通过选择或取消选择这些复选框来操作数据。...
EasyUI后台管理系统
03-07
EasyUI后台管理系统是一款基于JavaScript和CSS的前端框架，专门用于构建高效、美观的企业级Web应用后台界面。EasyUI提供了一套完整的组件库，包括布局、表格、表单、树形结构、对话框、菜单等，使得开发者能够快速...
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 616
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 655
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 910
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 235
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
easyui-tree 异步加载 queryparams
01-15
easyui-tree 异步加载 queryparams 是指在使用 easyui-tree 控件进行树状结构的异步加载时，可以向后台发送额外的查询参数。 一般来说，easyui-tree 控件是通过向后台发送请求，获取树状结构的数据并显示在页面上的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值