EasyUI02，03

z466764

于 2022-04-07 23:56:51 发布

阅读量96

点赞数

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/z466764/article/details/124028940

版权

easyui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

EasyUI(树形菜单+动态添加tab)
1、将EasyUI的css样式和js库都导入到项目中

HTML代码如下：

<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>

jQuery代码

json测试数据

[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]

运行效果：

EasyUI03（使用Oracle创建树形菜单）

导入jar包

二：写方法

包的结构：

具体代码：

DBHelper类

package com.zking.euidemo.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class DBHelper {
   //两个静态常量
   private static final String URL="jdbc:oracle:thin:@localhost:1521:orcl";
   private static final String CNAME="oracle.jdbc.driver.OracleDriver";

   /**
   * 加载驱动只有在类被加载到内存中的时候，执行一次，之后就不在执行
   */
   static {
       try {
           Class.forName(CNAME);
       } catch (Exception e) {
           e.printStackTrace();
       }
   }

   /**
   * 创建连接
   * @return 连接
   */
   public static Connection getCon() {
       Connection con=null;
       try {
           con=DriverManager.getConnection(URL, "scott", "tiger");
       } catch (Exception e) {
           e.printStackTrace();
       }
       return con;
   }

   /**
   * 关闭资源
   * @param con 连接
   * @param ps 执行对象
   * @param rs 结果集
   */
   public static void myClose(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();
       }
   }
}
Module(实体类)

package com.zking.euidemo.entity;

import java.util.ArrayList;
import java.util.List;

public class Module {
   private Integer id;//这里用int类型也可以，但要注意数据库里数据，因为int类型没有值是0,Integer是null,所以为避免出现空值，出现0的情况下，你数据库也有0导致出问题，这里最好用Integer
   private Integer pid;
   private String text;
   private String icon;
   private String url;
   private int sort;

   private List<Module> children=new ArrayList<>();

   public Integer getId() {
       return id;
   }
   public void setId(Integer id) {
       this.id = id;
   }
   public Integer getPid() {
       return pid;
   }
   public void setPid(Integer pid) {
       this.pid = pid;
   }
   public String getText() {
       return text;
   }
   public void setText(String text) {
       this.text = text;
   }
   public String getIcon() {
       return icon;
   }
   public void setIcon(String icon) {
       this.icon = icon;
   }
   public String getUrl() {
       return url;
   }
   public void setUrl(String url) {
       this.url = url;
   }
   public int getSort() {
       return sort;
   }
   public void setSort(int sort) {
       this.sort = sort;
   }
   public List<Module> getChildren() {
       return children;
   }
   public void setChildren(List<Module> children) {
       this.children = children;
   }
   @Override
   public String toString() {
       return "Module [id=" + id + ", pid=" + pid + ", text=" + text + ", icon=" + icon + ", url=" + url + ", sort="
               + sort + "]";
   }
}

dao方法类：

IModuleDao 实现一个接口

package com.zking.euidemo.dao;

import java.util.List;

import com.zking.euidemo.entity.Module;

public interface IModuleDao {
   /**
   * 单个查询
   * @param pid
   * @return
   */
   public List<Module> listModel(int pid);


}
ModuleDao

package com.zking.euidemo.dao;

import java.sql.Connection;

import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.euidemo.entity.Module;
import com.zking.euidemo.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.getCon();
           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) {
           e.printStackTrace();
       } finally {
           DBHelper.myClose(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(另一种写法：biz)服务层(业务逻辑层)

IModuleServlce

package com.zking.euidemo.service;

import java.util.List;

import com.zking.euidemo.entity.Module;

public interface IModuleServlce {
   /**
   * 单个查询
   * @param pid
   * @return
   */
   public List<Module> listModel(int pid);
}
ModuleServlce

package com.zking.euidemo.service;

import java.util.List;

import com.zking.euidemo.dao.IModuleDao;
import com.zking.euidemo.dao.ModuleDao;
import com.zking.euidemo.entity.Module;

public class ModuleServlce implements IModuleServlce{
   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) {
       IModuleServlce service = new ModuleServlce();
       List<Module> list = service.listModel(-1);
       list.forEach(t->System.out.println(t));
   }

}

Servlet(控制器)

ModuleServlet

package com.zking.euidemo.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.euidemo.entity.Module;
import com.zking.euidemo.service.IModuleServlce;
import com.zking.euidemo.service.ModuleServlce;

@WebServlet("/moduleServlet")//相当于配置和映射不用写web.xml了
public class ModuleServlet extends HttpServlet {

   private IModuleServlce service = new ModuleServlce();

   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();

       //将list对象转换为json格式
       String str = JSON.toJSONString(list);

       out.write(str);
       out.flush();//刷新
       out.close();//关闭
   }
}
index.jsp界面

<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@include file="common/head.jsp" %>
<script type="text/javascript">
$(function(){
   $("#funcTree").tree({
       //ctx是上下文参数，作为绝对路径使用
       url : ctx + '/moduleServlet',//树数据的请求地址
//双击事件
       onDblClick:function(node){
           //判重，如果为false就添加新的tab页
           if(!$("#tt").tabs("exists",node.text)){
               // add a new tab panel
               $('#tt').tabs('add',{
               title:node.text,
               content:node.text,
               closable:true
               });
           }else{
               //反之为true，选择一个选项卡面板
               $("#tt").tabs("select",node.text)
           }
       }
   });
})
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
       <ul id="funcTree" class="easyui-tree"></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>
</html>

效果图：

z466764

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI02，03

EasyUI(树形菜单+动态添加tab)1、将EasyUI的css样式和js库都导入到项目中<script>$(function(){ $('#funcTree').tree({ url:ctx +'/date/tree_data1.json', onDblClick:function(node){ $('#tt').tabs('add',{ ...
复制链接

扫一扫