基于EasyUI的基础之上实现树形功能菜单

页面展示截图如下:

基于EasyUI的基础之上实现树形功能菜单

基于EasyUI的基础之上实现树形功能菜单

基于EasyUI的基础之上实现树形功能菜单

基于EasyUI的基础之上实现树形功能菜单

为了实现以上效果,在开始前必须先将环境配置一下。

第一步: 首先,先将 jquery-easyui-1.2.6 文件引入到工程项目下,并在jsp页面上进入引入3个jsp文件和2个css文件。如下:

<span> </span><span> </span><span><script type="text/javascript" src="https://www.jb51.net/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <link type="text/css" href="https://www.jb51.net/jquery-easyui-1.2.6/themes/default/easyui.css"> <link type="text/css" href="https://www.jb51.net/jquery-easyui-1.2.6/themes/icon.css"> <script type="text/javascript" src="https://www.jb51.net/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script></span>

引入顺序必须按照以上顺序引入,否则页面展示效果将出错。

第二步:引入jar包,分别为:commons-beanutils-1.8.3.jar、commons-collections-3.2.1.jar、commons-lang-2.5.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar、json-lib-2.3-jdk15.jar、mysql-connector-java-5.1.17-bin.jar

代码实现

1、创建数据表

<span>drop database easyui; create database easyui; use easyui; show tables; #创建菜单表 create table menu( id int(11) not null auto_increment, ####菜单id### name varchar(20) default null, ####菜单名#### url varchar(100) default null, #### 菜单url#### checked varchar(10) default null, ####菜单是否被选中 icon varchar(30) default null, ####菜单图标#### parent_id int(11) default null, ####父节点菜单的id#### primary key(id) ####id是主键#### ); #插入测试数据 ####测试数据#### insert into menu(id,name,url,checked,icon,parent_id) values (1,'权限菜单',null,'',null,0), (2,'用户管理',null,'0',null,1), (3,'岗位管理',null,'',null,1), (4,'资源管理',null,'',null,1), (5,'用户功能1',null,'',null,2), (6,'岗位功能1',null,'0',null,3), (7,'资源功能2','/easyui/index.jsp','0',null,3), (8,'资源功能1','sss','0',null,4), (9,'岗位功能2',null,'',null,3), (10,'资源功能3','111','0',null,4), (11,'资源管理4','222','',null,4), (14,'岗位功能3','dfds',null,null,3), (17,'用户功能2','sss','0',null,2); #查看数据 select * from menu; //查询跟节点 select * from menu where parent_id=0; #查看指定父节点下有哪些子节点 select * from menu where parent_id=2;</span><span> </span>

2、JDBC连接工具类

JDBCUtils.Java

<span>package com.hsj.utils; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; public class JDBCUtils { static { try { Class.forName("com.mysql.jdbc.Driver"); } catch (ClassNotFoundException e) { e.printStackTrace(); } } public static Connection getConnection() throws Exception { return DriverManager.getConnection( "jdbc:mysql:///easyui?useUnicode=true&characterEncoding=UTF-8", "root", "zxczxc"); } public static void close(ResultSet rs, PreparedStatement ps, Connection conn) { try { if (rs != null) rs.close(); } catch (Exception e) { e.printStackTrace(); } finally { try { if (ps != null) ps.close(); } catch (Exception e) { e.printStackTrace(); } finally { try { if (conn != null) conn.close(); } catch (Exception e) { e.printStackTrace(); } } } } }</span><span> </span>

3、创建实体类domain

Menu.java

<span>package com.hsj.domain; public class Menu { private int id; //菜单id private String name; //菜单名 private String url; //菜单链接的网址 private String checked; //菜单是否被选中 private String icon; //菜单图标 private int parent_id; //当前菜单的父节点id public Menu(){} public Menu(int id, String name, String url, String checked, String icon,int parentId) { this.id = id; this.name = name; this.url = url; this.checked = checked; this.icon = icon; parent_id = parentId; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getChecked() { return checked; } public void setChecked(String checked) { this.checked = checked; } public String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public int getParent_id() { return parent_id; } public void setParent_id(int parentId) { parent_id = parentId; } } </span>

TreeDTD.java

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyfjxz.html