easyui02和easyui03

最新推荐文章于 2024-06-05 15:38:12 发布

菜菜子吖

最新推荐文章于 2024-06-05 15:38:12 发布

阅读量1k

点赞数

分类专栏： ajax 文章标签： java

本文链接：https://blog.csdn.net/m0_68761656/article/details/124022472

版权

ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

easyui02

一、准备工作

1、将EasyUI的css样式和js库都导入到项目中

二、树形菜单

<body class="easyui-layout">
	<div data-options="region:'north',title:'菜菜',split:true"
		style="height: 100px;"></div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 200px;">
		<ul id="funcTree"></ul>
	</div>
	<div data-options="region:'center'"
		style="padding: 5px; background: #eee;">
		<div id="tt" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div title="首页" style="padding: 20px; display: none;">首页</div>
		</div>
	</div>
	<div data-options="region:'south',split:true"
		style="text-align: center; height: 30px; background: #E0ECFF"
		class="panel-title">Copyright@XXXX有限责任公司</div>
</body>

<script type="text/javascript">
	$(function() {
		$('#funcTree').tree({
            //ctx是上下文参数，作为绝对路径使用，详细可以查看上一章EasyUI
			url : ctx + '/data/tree_data1.json',//拿到json里面的数据用作于树形菜单
            //双击事件
			onDblClick : function(node) {
                //判重，如果为false即可以添加新的tab
				if(!$("#tt").tabs('exists',node.text)){
					$('#tt').tabs('add', {
						title:node.text,
						content:node.text,
						closable:true
					});
                //如果为true，证明已经存在，就移动到指定的tab
				}else{
					$('#tt').tabs('select',node.text)
				}
			}
		});
	})
</script>

easyui03

一、项目搭建

二、树形表结构

<%@ 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">
<html>
<head>
	<%@ include file="common/head.jsp" %>
	<title>Insert title here</title>
	<script>
	$(function() {
		$("#funcTree").tree({
			url: ctx+"/moduleServlet",
			onDblClick:function(node) {
				$("#funTab").tabs("add", {
					title:node.text,    
				    content:'Tab Body',    
				    closable:true,    
				    tools:[{
				        iconCls:'icon-mini-refresh',    
				        handler:function(){    
				            alert('refresh');    
				        }    
				    }]
				})
			}
		});
		
	});
	</script>
</head>
<body class="easyui-layout">
		<div data-options="region:'north'" style="height:50px"></div>
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		
		<div data-options="region:'west',split:true" title="功能导航---菜菜" style="width:230px;">
			<ul id="funcTree" class="easyui-tree"></ul>
		</div>
		
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="border:0px;">
			<div id="funTab" class="easyui-tabs" style="width:100%;height:100%">   
			    <div title="Tab1" style="padding:10px;display:none;">   
			        <table class="easyui-datagrid"
							data-options="url:'${ctx}/data/datagrid_data1.json',method:'get',border:true,singleSelect:true,fit:true,fitColumns:true">
						<thead>
							<tr>
								<th data-options="field:'itemid'" width="80">Item ID</th>
								<th data-options="field:'productid'" width="100">Product ID</th>
								<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
								<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
								<th data-options="field:'attr1'" width="150">Attribute</th>
								<th data-options="field:'status',align:'center'" width="40">Status</th>
							</tr>
						</thead>
					</table>  
			    </div> 
			</div>
		</div>
	
</body>
</html>

三、创建模型

四、dao方法实现

五、service层开发

package com.zking.easyui03.servlet;

import java.io.IOException;

import java.io.PrintWriter;
import java.util.List;

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.easyui03.model.Module;
import com.zking.easyui03.service.IModuleService;
import com.zking.easyui03.service.ModuleService;


@WebServlet("/moduleServlet")
public class ModuleServlet extends HttpServlet {
	
	private IModuleService service = new ModuleService();
	
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		doPost(req, resp);
	}
	
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		
		req.setCharacterEncoding("utf-8");
		resp.setContentType("application/json; charset=utf-8");
		
		
		List<Module> list = service.listModel(-1);
		
		PrintWriter out = resp.getWriter();
		String str = JSON.toJSONString(list);
		
		out.write(str);
		out.flush();
		out.close();
	}

}

菜菜子吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui02和easyui03

目录easyui02一、准备工作二、树形菜单easyui03一、项目搭建二、树形表结构三、创建模型四、dao方法实现五、service层开发easyui02一、准备工作1、将EasyUI的css样式和js库都导入到项目中二、树形菜单<body class="easyui-layout"> <div data-options="region:'north',title:'菜菜',split:true" .
复制链接

扫一扫