目录
easyui.Tree前端工作
easyui.Tree前后端工作
easyui.Tree前端工作
一、树控件的使用
借助文档，建立界面
代码如下：
<%@ 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>
</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="West" style="width:230px;">
<ul id="funcTree" class="easyui-tree">
<!-- <li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li> -->
</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>
</div>
</body>
</html>二、动态tab
双击获取界面
<script>
$(function() {
$("#funcTree").tree({
url: ctx+"/data/tree_data1.json",
onDblClick:function(node) {
$("#funTab").tabs("add", {
title:node.text,
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
})
}
});
});
</script>页面的简单跳转：
<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> easyui.Tree前后端工作
一、项目搭建
准备好所需要的包：
连接和dao层：
DBHelper帮助类：
package com.zking.easyui03.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class DBHelper {
private static final String cname="oracle.jdbc.driver.OracleDriver";
private static final String url="jdbc:oracle:thin:@192.168.83.133:1521:orcl";
//只有在类被加载到内存的时候，执行一次
static {
try {
Class.forName(cname);
} catch (Exception e) {
e.printStackTrace();
}
}
public static Connection getsCon() {
Connection con = null;
try {
con = DriverManager.getConnection(url,"scott","123456");
} catch (Exception e) {
e.printStackTrace();
}
return con;
}
public static void Close(Connection con,PreparedStatement ps,ResultSet rs) {
try {
if(rs!=null) {
rs.close();
}
if(ps!=null) {
ps.close();
}
if(con!=null&&!con.isClosed()) {
con.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
二、树形表结构
数据库数据及表结构：
CREATE TABLE t_module (
id integer DEFAULT NULL,
pid integer DEFAULT NULL,
text VARCHAR(150) DEFAULT NULL,
icon VARCHAR(90) DEFAULT NULL,
url VARCHAR(180) DEFAULT NULL,
sort integer DEFAULT NULL
);
INSERT INTO t_module VALUES (20, -1, '订单管理', NULL, '', 2);
INSERT INTO t_module VALUES (2001, 20, '订单管理', NULL, '/orderList.jsp', 6);
INSERT INTO t_module VALUES (2002, 20, '订单统计', NULL, '/orderStatistics.jsp', 7);
INSERT INTO t_module VALUES (21, -1, '系统管理', NULL, '', 3);
INSERT INTO t_module VALUES (2101, 21, '用户管理', NULL, 'jsp/system/userManage.jsp', 8);
INSERT INTO t_module VALUES (2102, 21, '权限管理', NULL, 'jsp/system/authManage.jsp', 10);
INSERT INTO t_module VALUES (2103, 21, '字典管理', NULL, '/dictList.jsp', 11);
INSERT INTO t_module VALUES (22, -1, '书本管理', NULL, '', 1);
INSERT INTO t_module VALUES (2201, 22, '新增书本', NULL, 'jsp/book/addBook.jsp', 4);
INSERT INTO t_module VALUES (2202, 22, '书本管理', NULL, 'jsp/book/bookList.jsp', 5);树表和自关联及无限级分类都是一个意思
三、创建模型
建立实体类 Model
四、dao方法实现
package com.zking.easyui03.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.zking.easyui03.model.Module;
import com.zking.easyui03.util.DBHelper;
public class ModuleDao implements IModuleDao {
@Override
public List<Module> listModel(int pid) {
List<Module> list = new ArrayList<>();
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
String sql = "select id,pid,text,icon,url,sort from t_module where pid=?";
con = DBHelper.getsCon();
ps = con.prepareStatement(sql);
ps.setInt(1, pid);
rs = ps.executeQuery();
while(rs.next()) {
Module m = new Module();
m.setId(rs.getInt("id"));
m.setPid(rs.getInt("pid"));
m.setText(rs.getString("text"));
m.setUrl(rs.getString("url"));
m.setSort(rs.getInt("sort"));
list.add(m);
}
} catch (Exception e) {
} finally {
DBHelper.Close(con, ps, rs);
}
return list;
}
public static void main(String[] args) {
ModuleDao dao = new ModuleDao();
List<Module> list = dao.listModel(21);
list.forEach(t->System.out.println(t));
}
}
五、service层开发
package com.zking.easyui03.service;
import java.util.List;
import com.zking.easyui03.dao.IModuleDao;
import com.zking.easyui03.dao.ModuleDao;
import com.zking.easyui03.model.Module;
public class ModuleService implements IModuleService {
private IModuleDao dao = new ModuleDao();
@Override
public List<Module> listModel(int pid) {
List<Module> list = dao.listModel(pid);
for(Module m: list) {
if(m.getUrl() == null || "".equals(m.getUrl().trim())) {
m.setChildren(listModel(m.getId()));
}
}
return list;
}
public static void main(String[] args) {
IModuleService service = new ModuleService();
List<Module> list = service.listModel(-1);
list.forEach(t->System.out.println(t));
}
}
ModuleServlet：
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();
}
}
六、前端页面
在原有的基础上增加：
<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>七、总结
- jar包和方法必须要有；
- 关闭资源的顺序不可以有误；
- 注意数据库语句；
- service层（递归）；
- 界面的调用及格式。
easyui.Tree前后端工作就分享到这了，希望能对大家有所帮助！
