easyui(tree后台工作)

最新推荐文章于 2022-05-06 22:25:11 发布

星星铺满海面

最新推荐文章于 2022-05-06 22:25:11 发布

阅读量84

点赞数 2

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/weixin_67677668/article/details/124587327

版权

一、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.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.zking.biz.IModuleBiz;
import com.zking.biz.ModuleBiz;
import com.zking.entity.Module;

@WebServlet("/IndexServlet")
public class IndexServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//三个编码方式
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		//拿到out
		PrintWriter out = response.getWriter();
		//拿biz
		IModuleBiz imb=new ModuleBiz();
		List<Module> ls=imb.getAllById(-1);
		String str=JSON.toJSONString(ls);
		out.write(str);
		out.flush();
		out.close();
	}

}

主界面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入head -->
<%@ 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 + '/IndexServlet',//请求地址
			animate : true,//折叠或者展开的时候是否显示动画效果
			onDblClick : function(node) {
				//alert(node.text+"   "+node.id+"   "+node.state);  // 在用户双击的时候提示
				//alert(node.iconCls);//图标
				//拿到对应的后代节点的集合
				var cs=$('#myTree').tree('getChildren',node.target);
				//alert(cs.length);
				if(cs.length==0){
					//判断是否存在
					var f = $('#myTab').tabs('exists',node.text);
					//alert(f);
					if(!f){//说明不存在
						//新打开一个选项卡(tab页) iconCls:'icon-ok' 
						$('#myTab').tabs('add',{    
						    title:node.text, // 标题  
						    content:'<iframe frameborder="0" width="99%" height="99%" src="'+node.url+'"></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: 100px; text-align: center;">
		<h1>书籍管理后台</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 70px; text-align: center;">
		<b>&copy;玉渊工作室，未经允许不可随意使用</b>
	</div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 200px;">
		<!-- 左侧tree控件 -->
		<ul id="myTree" class="easyui-tree">

		</ul>

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

星星铺满海面

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui(tree后台工作)

一、servletpackage 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
复制链接

扫一扫