Easyui【第二章】Tree前后端

最新推荐文章于 2024-08-08 16:33:07 发布

明思齐

最新推荐文章于 2024-08-08 16:33:07 发布

阅读量125

点赞数

文章标签： easyui javascript ecmascript

本文链接：https://blog.csdn.net/m0_61911999/article/details/125019098

版权

环境搭建（项目设计）：

1、创建管理表

2、提取公共页面（static）

在js文件中导入jquert-easyui-1.5.4的包

3、tree前端显示

4、动态生成tab页

5、将数据库（管理表）值绑定到前端页面(dao.imp、biz、biz.imp可自行拓展)

IModuleDao.java

package com.china.dao;
import java.util.List;
import com.china.entity.Module;

/**
 * 	树的数据访问层接口
 * @author gss
 *
 */
public interface IModuleDao {
	/**
	 * 获取所有的节点
	 * @param pid	编号
	 * @return	返回查询的集合
	 */
	public List<Module> getAll(int pid);

}

ModuleServlet.java

package com.china.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.china.biz.IModuleBiz;
import com.china.biz.imp.Imp_ModuleBiz;
import com.china.entity.Module;

/**
 * Servlet implementation class ModuleServlet
 */
@WebServlet("/ModuleServlet")
public class ModuleServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置编码
		response.setContentType("application/json;charset=utf-8");
		//调用业务逻辑查询所有方法
		IModuleBiz imb = new Imp_ModuleBiz();
		List<Module> list = imb.getAll(-1);
		//解析
		String json = JSON.toJSONString(list);
		//获取响应对象的输出流
		PrintWriter out = response.getWriter();
		out.write(json);//输出
		out.flush();//清空
		out.close();//关闭
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		doGet(request, response);
	}
}

代码展示：

head.jsp（获取主页面的跳转路径，将对象存储到request中）

<%
	request.setAttribute("lxy", request.getContextPath());
%>
<link rel="stylesheet" type="text/css" href="${lxy}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${lxy}/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${lxy}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${lxy}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
<script>
	var lxy=${lxy};
</script>

index.jsp (主页面)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>锦瑟华年</title>
<%@include file="static/head.jsp" %>
<script type="text/javascript">
	$(function() {
		$("#tree").tree({
			url:"${lxy}/ModuleServlet",
			onDblClick:function(node){
				//判断选项卡中是否已存在名字为node.text的选项卡
				if($("#tabs").tabs("exists",node.text)){//如果存在就设置选中
					$("#tabs").tabs("select",node.text);
				}else{//不存在就添加新的tabs
					$('#tabs').tabs('add',{    
					    title:node.text,    
					    content:node.text,    
					    closable:true,    
					    tools:[{    
					        iconCls:'icon-mini-refresh',    
					        handler:function(){    
					            alert('refresh--刷新');    
					        }    
					    }]    
					});  
				}
			}
		})
	})
</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'信息管理系统',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版权所有@锦瑟华年',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'目录',split:true" style="width:160px;">
    	<!--  -->
    	<ul id="tree" class="easyui-tree"></ul>  
    	<!--  -->
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
    	<!-- aaa -->
    	<div id="tabs" class="easyui-tabs" style="width:100%;height:100%;">   
		    <div title="首页" style="padding:20px;display:none;">   
		        tab1    
		    </div>   
		</div>  
    	<!-- aaa -->
    </div>   
</body>  

</html>

<%@include file="static/head.jsp" %>:引用head.jsp中的路径

include指令(静态包含)：通过file属性来指定被包含的页面

效果图如下：

明思齐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Easyui【第二章】Tree前后端

环境搭建（项目设计）：1、创建管理表2、提取公共页面（static）在js文件中导入jquert-easyui-1.5.4的包3、tree前端显示4、动态生成tab页5、将数据库（管理表）值绑定到前端页面(dao.imp、biz、biz.imp可自行拓展)IModuleDao.javapackage com.china.dao;import java.util.List;import com.china.entity.Module;/** * 树的数..
复制链接

扫一扫