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