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


Posted in Javascript onJune 28, 2017

页面展示截图如下:

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

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

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

<span style="font-size:14px;"> </span><span style="font-size:14px; white-space: pre;"> </span><span style="font-family:Courier New;font-size:12px;"><script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>  
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.6/themes/default/easyui.css"> 
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.6/themes/icon.css"> 
 <script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js"></script> 
 <script type="text/javascript" src="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 style="font-size:14px;">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 style="font-size:24px;"> 
</span>

2、JDBC连接工具类

JDBCUtils.Java

<span style="font-family:Courier New;font-size:12px;">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 style="font-size:24px;"> 
</span>

3、创建实体类domain

Menu.java

<span style="font-family:Courier New;font-size:12px;">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

<span style="font-family:Courier New;font-size:12px;">package com.hsj.domain; 
import java.util.HashMap; 
import java.util.Map; 
public class TreeDTO { 
 private int id; 
 private String text; 
 private String iconCls; 
 private String checked; 
 private int parent_id; 
 private String state; 
 /** 
  * 自定义属性信息 
  */ 
 private Map<String, Object> attributes = new HashMap<String, Object>(); 
 public TreeDTO() { 
 } 
 public TreeDTO(int id, String text, String iconCls, String checked, 
   int parent_id, String state, Map<String, Object> attributes) { 
  this.id = id; 
  this.text = text; 
  this.iconCls = iconCls; 
  this.checked = checked; 
  this.parent_id = parent_id; 
  this.state = state; 
  this.attributes = attributes; 
 } 
 public int getId() { 
  return id; 
 } 
 public void setId(int id) { 
  this.id = id; 
 } 
 public String getText() { 
  return text; 
 } 
 public void setText(String text) { 
  this.text = text; 
 } 
 public String getIconCls() { 
  return iconCls; 
 } 
 public void setIconCls(String iconCls) { 
  this.iconCls = iconCls; 
 } 
 public String getChecked() { 
  return checked; 
 } 
 public void setChecked(String checked) { 
  this.checked = checked; 
 } 
 public int getParent_id() { 
  return parent_id; 
 } 
 public void setParent_id(int parentId) { 
  parent_id = parentId; 
 } 
 public String getState() { 
  return state; 
 } 
 public void setState(String state) { 
  this.state = state; 
 } 
 public Map<String, Object> getAttributes() { 
  return attributes; 
 } 
 public void setAttributes(Map<String, Object> attributes) { 
  this.attributes = attributes; 
 } 
 @Override 
 public String toString() { 
  return "TreeDTO [attributes=" + attributes + ", checked=" + checked 
    + ", iconCls=" + iconCls + ", id=" + id + ", parent_id=" 
    + parent_id + ", state=" + state + ", text=" + text + "]"; 
 } 
} 
</span>

4、创建接口DAO

MeunDao.java

<span style="font-family:Courier New;font-size:12px;">package com.hsj.dao; 
import java.util.List; 
import com.hsj.domain.Menu; 
import com.hsj.domain.TreeDTO; 
public interface MenuDao{ 
 /** 
  * 根据父节点的值查询所有的子节点 
  * @param parentId 
  * @return 
  */ 
 public List<TreeDTO> getChildrenByParentId(String parentId); 
 /** 
  * 根据id值查询当前对象 
  * @param id 
  * @return 
  */ 
 public Menu findMenuById(int id); 
 /** 
  * 保存指定对象 
  * @param <T> 
  * @param t 
  */ 
 public <T> void save(T t); 
 /** 
  * 修改菜单对象 
  * @param menu 
  */ 
 public void update(Menu menu); 
 /** 
  * 根据id删除指定对象 
  * @param id 
  */ 
 public void delete(int id); 
 /** 
  * 根据父节点删除当前父节点下所有的子节点 
  * @param parentId 父节点id 
  */ 
 public void deleteChildrenByParentId(int parentId); 
 /** 
  * 根据当前节点 的id值删除它的所有子节点 
  * @param id 
  */ 
  public void deleteChildren(int id); 
} 
</span>

5、实现DAO接口方法Bean

MenuDaoBean.java

<span style="font-family:Courier New;font-size:12px;">package com.hsj.dao.bean; 
import java.lang.reflect.Field; 
import java.lang.reflect.Method; 
import java.sql.Connection; 
import java.sql.PreparedStatement; 
import java.sql.ResultSet; 
import java.util.ArrayList; 
import java.util.HashMap; 
import java.util.List; 
import java.util.Map; 
import com.hsj.dao.MenuDao; 
import com.hsj.domain.Menu; 
import com.hsj.domain.TreeDTO; 
import com.hsj.utils.JDBCUtils; 
public class MenuDaoBean implements MenuDao{ 
 public <T> int getTotalRecord(Class<T> clazz) { 
  // TODO Auto-generated method stub 
  return 0; 
 } 
 public <T> void save(T t) 
 { 
  //1.根据对象得到类模板对象 
  Class<T> clazz= (Class<T>) t.getClass(); 
  //2.得到当前类中所有字段组成的数组,不管访问权限如何,但不包括父类中的字段 
  Field[] fields=clazz.getDeclaredFields(); 
  //insert into t_menu(field1,field2,....) values(value1,value2,....) 
  List<String> key=new ArrayList<String>();//key用来存储字段列表 
  List<Object> value=new ArrayList<Object>();//value用来存储值列表 
  String methodName=null; 
  Method method=null; 
  for(int i=0;i<fields.length;i++) 
  { 
   try 
   {  
    //getName 
    methodName="get"+getMethodName(fields[i].getName()); 
    method=clazz.getMethod(methodName); 
    Object o=method.invoke(t); 
    if(o!=null && !"id".equals(fields[i].getName())) 
    { 
      key.add(fields[i].getName()); 
      value.add(o);      
    } 
   } 
   catch (Exception e) 
   { 
    e.printStackTrace(); 
   }; 
  } 
  //组拼sql语句 
  //String table=clazz.getName().substring(clazz.getName().lastIndexOf(".")+1); 
  String table=clazz.getSimpleName(); 
  StringBuffer sql= new StringBuffer("insert into "+table+" ("); 
  StringBuffer values=new StringBuffer(" values("); 
  for(int i=0;i<value.size();i++) 
  { 
     sql.append(key.get(i)+","); 
     values.append("?,"); 
  } 
  //insert into menu (name,url) 
  sql.deleteCharAt(sql.length()-1).append(")"); 
  //values(?,?) 
  values.deleteCharAt(values.length()-1).append(")"); 
  //insert into menu (name,url) values(?,?) 
  sql.append(values); 
  Connection conn=null; 
  PreparedStatement ps=null; 
  try 
  { 
   conn=JDBCUtils.getConnection(); 
   ps=conn.prepareStatement(sql.toString()); 
   //只有Object[]不为空且数组中有元素 
   if(key!=null && key.size()>0) 
   { 
    for(int i=0;i<key.size();i++) 
    { 
     ps.setObject(i+1,value.get(i)); 
    } 
   } 
   System.out.println(ps.toString()); 
   ps.execute(); 
   System.out.println("添加成功"); 
  } 
  catch (Exception e) { 
   e.printStackTrace(); 
  }finally{ 
   JDBCUtils.close(null, ps, conn); 
  } 
 } 
 /** 
  * 将该字符串的一个字母变成大写 
  * @param fildeName 字符串 
  * @return 
  * @throws Exception 
  */ 
 private static String getMethodName(String fieldName) throws Exception 
 { 
  byte[] items = fieldName.getBytes(); 
  items[0] = (byte) ((char) items[0] - 'a' + 'A'); 
  return new String(items); 
 } 
 /** 
  * 根据菜单的父id找到他所有的子菜单并存储到集合中 
  */ 
 public List<TreeDTO> getChildrenByParentId(String parentId) { 
  Connection conn = null; 
  PreparedStatement ps = null; 
  ResultSet rs = null; 
  List<Menu> menus=new ArrayList<Menu>(); 
  List<TreeDTO> treeDTOS=new ArrayList<TreeDTO>(); 
  try 
  { 
   String sql=""; 
   if(parentId==null || "".equals(parentId)) 
   { 
    sql="select * from menu where parent_id=0"; 
   }else{ 
    sql="select * from menu where parent_id="+parentId; 
   } 
   conn=JDBCUtils.getConnection(); 
   ps=conn.prepareStatement(sql); 
   rs=ps.executeQuery(); 
   while(rs.next()) 
   { 
     Menu menu=new Menu(); 
     menu.setId(rs.getInt("id")); 
     menu.setIcon(rs.getString("icon")); 
     menu.setUrl(rs.getString("url")); 
     menu.setChecked(rs.getString("checked")); 
     menu.setName(rs.getString("name")); 
     menu.setParent_id(rs.getInt("parent_id")); 
     menus.add(menu); 
   } 
  }catch(Exception e){ 
   e.printStackTrace(); 
  }finally{ 
   JDBCUtils.close(rs, ps, conn); 
  } 
  for(Menu m : menus) 
  { 
   TreeDTO td=new TreeDTO(); 
   td.setId(m.getId()); 
   td.setText(m.getName()); 
   td.setChecked(m.getChecked()); 
   td.setIconCls(m.getIcon()); 
   td.setParent_id(m.getParent_id()); 
   List<Menu> childrenList=getChildren(m.getId()); 
   if(childrenList.size()>0) 
   { 
    td.setState("closed"); 
   }else{ 
    td.setState("open"); 
   } 
   Map<String,Object> attributes=new HashMap<String,Object>(); 
   attributes.put("url", m.getUrl()); 
   td.setAttributes(attributes); 
   treeDTOS.add(td); 
  } 
  return treeDTOS; 
 } 
 /** 
  * 根据当前菜单的主键值找到当前菜单有哪些子菜单对象组成的集合并返回 
  * @param id 
  * @return 
  */ 
 public List<Menu> getChildren(int id) 
 { 
  Connection conn = null; 
  PreparedStatement ps = null; 
  ResultSet rs = null; 
  List<Menu> menus=new ArrayList<Menu>(); 
  try 
  { 
   conn=JDBCUtils.getConnection(); 
   ps=conn.prepareStatement("select * from menu where parent_id="+id); 
   rs=ps.executeQuery(); 
   while(rs.next()) 
   { 
     Menu menu=new Menu(); 
     menu.setId(rs.getInt("id")); 
     menu.setIcon(rs.getString("icon")); 
     menu.setUrl(rs.getString("url")); 
     menu.setChecked(rs.getString("checked")); 
     menu.setName(rs.getString("name")); 
     menu.setParent_id(rs.getInt("parent_id")); 
     menus.add(menu); 
   } 
  } 
  catch(Exception e) 
  { 
   e.printStackTrace(); 
  }finally{ 
   JDBCUtils.close(rs, ps, conn); 
  } 
  return menus; 
 } 
 /** 
  * 根据菜单的主键查找当前菜单对象 
  */ 
 public Menu findMenuById(int id) { 
  Connection conn = null; 
  PreparedStatement ps = null; 
  ResultSet rs = null; 
  Menu menu=null; 
  try 
  { 
   conn=JDBCUtils.getConnection(); 
   ps=conn.prepareStatement("select * from menu where id="+id); 
   rs=ps.executeQuery(); 
   if(rs.next()) 
   { 
     menu=new Menu(); 
     menu.setId(rs.getInt("id")); 
     menu.setIcon(rs.getString("icon")); 
     menu.setUrl(rs.getString("url")); 
     menu.setChecked(rs.getString("checked")); 
     menu.setName(rs.getString("name")); 
     menu.setParent_id(rs.getInt("parent_id")); 
   } 
  } 
  catch(Exception e) 
  { 
   e.printStackTrace(); 
  }finally{ 
   JDBCUtils.close(rs, ps, conn); 
  } 
  return menu; 
 } 
 public void update(Menu menu) { 
  Connection conn = null; 
  PreparedStatement ps = null; 
  ResultSet rs = null; 
  try 
  { 
   conn=JDBCUtils.getConnection(); 
   ps=conn.prepareStatement("update menu set name=?,url=?,checked=?,icon=?,parent_id=? where id=?"); 
   ps.setString(1, menu.getName()); 
   ps.setString(2, menu.getUrl()); 
   ps.setString(3, menu.getChecked()); 
   ps.setString(4, menu.getIcon()); 
   ps.setInt(5, menu.getParent_id()); 
   ps.setInt(6, menu.getId()); 
   ps.executeUpdate(); 
  } 
  catch(Exception e) 
  { 
   e.printStackTrace(); 
  }finally{ 
   JDBCUtils.close(rs, ps, conn); 
  } 
 } 
 /** 
  * 根据主键删除当前菜单对象 
  */ 
 public void delete(int id) { 
  Connection conn = null; 
  PreparedStatement ps = null; 
  ResultSet rs = null; 
  try 
  { 
   conn=JDBCUtils.getConnection(); 
   ps=conn.prepareStatement("delete from menu where id="+id); 
   ps.executeUpdate(); 
  } 
  catch(Exception e) 
  { 
   e.printStackTrace(); 
  }finally{ 
   JDBCUtils.close(rs, ps, conn); 
  } 
 } 
 /** 
  * 根据当前菜单的主键值删除当前菜单的所有子菜单及当前菜单对象 
  */ 
 public void deleteChildren(int id) 
 { 
  List<Menu> menus=getChildren(id); 
  for(int i=0;i<menus.size();i++) 
  { 
   int cid=menus.get(i).getId(); 
   //delete(cid); 
   deleteChildren(cid); 
  } 
  delete(id); 
 } 
 /** 
  * 根据菜单的父id删除所有子菜单 
  */ 
 public void deleteChildrenByParentId(int parentId) { 
  Connection conn = null; 
  PreparedStatement ps = null; 
  ResultSet rs = null; 
  try 
  { 
   conn=JDBCUtils.getConnection(); 
   ps=conn.prepareStatement("delete from menu where parent_id="+parentId); 
   System.out.println("========="+ps.toString()); 
   ps.executeUpdate(); 
  } 
  catch(Exception e) 
  { 
   e.printStackTrace(); 
  }finally{ 
   JDBCUtils.close(rs, ps, conn); 
  } 
 } 
} 
</span>

6、创建Servlet 并配置映射文件

MenuServlet.java

<span style="font-family:Courier New;font-size:12px;">package com.hsj.servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.List; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import net.sf.json.JSONArray; 
import com.hsj.dao.MenuDao; 
import com.hsj.dao.bean.MenuDaoBean; 
import com.hsj.domain.Menu; 
import com.hsj.domain.TreeDTO; 
public class MenuServlet extends HttpServlet { 
 public void doGet(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  this.doPost(request, response); 
 } 
 public void doPost(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  response.setContentType("text/html;charset=utf-8"); 
  PrintWriter out = response.getWriter(); 
  String method = request.getParameter("method"); 
  if (method != null && !"".equals(method) && "getMenu".equals(method)) { 
   getMenu(request, response); 
  } else if (method != null && !"".equals(method) 
    && "changeMenu".equals(method)) { 
   changeMenu(request, response); 
  } else if (method != null && !"".equals(method) 
    && "addMenu".equals(method)) { 
   addMenu(request, response); 
  } else if (method != null && !"".equals(method) 
    && "updateMenu".equals(method)) { 
   updateMenu(request, response); 
  } else if (method != null && !"".equals(method) 
    && "deleteMenu".equals(method)) { 
   deleteMenu(request, response); 
  } 
  out.flush(); 
  out.close(); 
 } 
 /** 
  * 删除当前菜单及其当前菜单的所有子菜单 
  * @param request 
  * @param response 
  */ 
 private void deleteMenu(HttpServletRequest request, 
   HttpServletResponse response) { 
  String id=request.getParameter("id"); 
  MenuDao menuDao=new MenuDaoBean(); 
  System.out.println(id); 
  menuDao.deleteChildren(Integer.valueOf(id)); 
 } 
 /** 
  * 修改菜单 
  * @param request 
  * @param response 
  */ 
 private void updateMenu(HttpServletRequest request, 
   HttpServletResponse response) { 
  String id=request.getParameter("id"); 
  String name=request.getParameter("name"); 
  String url=request.getParameter("url"); 
  MenuDao menuDao=new MenuDaoBean(); 
  Menu menu=menuDao.findMenuById(Integer.valueOf(id)); 
  menu.setName(name); 
  menu.setUrl(url); 
  menuDao.update(menu); 
 } 
 /** 
  * 添加菜单 
  * @param request 
  * @param response 
  */ 
 private void addMenu(HttpServletRequest request,HttpServletResponse response) { 
  String parentId=request.getParameter("parentId"); 
  String name=request.getParameter("name"); 
  String url=request.getParameter("url"); 
  Menu menu=new Menu(); 
  menu.setName(name); 
  menu.setUrl(url); 
  menu.setParent_id(Integer.valueOf(parentId)); 
  MenuDao menuDao=new MenuDaoBean(); 
  menuDao.save(menu); 
 } 
 /** 
  * 菜单菜单的父菜单 
  * @param request 
  * @param response 
  */ 
 private void changeMenu(HttpServletRequest request, 
   HttpServletResponse response) { 
   String targetId= request.getParameter("targetId"); 
   String sourceId= request.getParameter("sourceId"); 
   String point= request.getParameter("point"); 
   System.out.println("point="+point); 
   MenuDao menuDao=new MenuDaoBean(); 
   Menu target= menuDao.findMenuById(Integer.valueOf(targetId)); 
   Menu source= menuDao.findMenuById(Integer.valueOf(sourceId)); 
   if("append".equals(point)) 
   {  
    //源菜单作为目标菜单的子菜单 
    source.setParent_id(target.getId()); 
   }else{ 
    //源菜单和目标菜单使用相同的父菜单的id值 
    source.setParent_id(target.getParent_id()); 
   } 
   menuDao.update(source); 
 } 
 /** 
  * 根据父id得到它所有的子菜单 
  * @param request 
  * @param response 
  */ 
 private void getMenu(HttpServletRequest request,HttpServletResponse response) { 
  System.out.println("getMenu-------"); 
  //获取当前展的节点的id 
  try { 
   String parentId=request.getParameter("id"); 
   MenuDao menuDao=new MenuDaoBean(); 
   List<TreeDTO> treeDTOS=menuDao.getChildrenByParentId(parentId); 
   System.out.println(treeDTOS.toString()); 
   response.setContentType("text/html;charset=utf-8"); 
   String json=JSONArray.fromObject(treeDTOS).toString(); 
   response.getWriter().write(json); 
   System.out.println("json="+json); 
  } catch (Exception e) { 
   e.printStackTrace(); 
  } 
 } 
} 
</span>

映射文件信息:

Web.xml

<span style="font-family:Courier New;"><?xml version="1.0" encoding="UTF-8"?> 
<web-app version="2.5" 
 xmlns="http://java.sun.com/xml/ns/javaee" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 
 <servlet> 
 <servlet-name>MenuServlet</servlet-name> 
 <servlet-class>com.hsj.servlet.MenuServlet</servlet-class> 
 </servlet> 
 <servlet-mapping> 
 <servlet-name>MenuServlet</servlet-name> 
 <url-pattern>/menuServlet</url-pattern> 
 </servlet-mapping> 
 <welcome-file-list> 
 <welcome-file>index.jsp</welcome-file> 
 </welcome-file-list> 
</web-app></span>

7、JSP网页代码

<span style="font-family:Courier New;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
 <base href="<%=basePath%>"> 
 <title>tree的使用</title> 
 <script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>  
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.6/themes/default/easyui.css"> 
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.6/themes/icon.css"> 
 <script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js"></script> 
 <script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> 
 <script type="text/javascript"> 
  var flag; 
  $(function(){ 
   $("#t1").tree({ 
    url:"menuServlet?method=getMenu", 
     animate:true,//展开和折叠菜单时会伴随着动画 
     dnd:true,//启动菜单项的拖拽功能 
     //checkbox:true,//菜单项前面是否显示复选框 
     /* 
     point的取值可能为: 
      append:源节点作为目标节点的子节点 
      top:源节点和目标节点使用相同的父节点,并且源节点在目标节点的上面 
      bottom:源节点会产生在目标节点的下面,并且和目标节点是兄弟关系,并且源节点在目标节点的下面 
     */ 
     onDrop:function(target, source, point){//当拖拽节点松手时触发 
      //获取目标节点对象 
      var tar=$("#t1").tree("getNode",target); 
      $.ajax({ 
       type:"post", 
       url:"menuServlet?method=changeMenu", 
       data:{ 
        targetId:tar.id, 
        sourceId:source.id, 
        point:point 
       }, 
       dataType:"json", 
       cache:false, 
       success:function(result){ 
        $.messager.show({ 
         title:"提示信息", 
         msg:"操作成功" 
        }); 
       } 
      }); 
     }, 
     onContextMenu: function(e,node){ 
      //禁止浏览器的右键菜单 
      e.preventDefault(); 
      $(this).tree('select', node.target); 
      $('#mm').menu('show', { 
       left: e.pageX, 
       top: e.pageY 
      }); 
     } 
   }); 
   $("#savebtn").click(function(){ 
     if(flag=="add") 
     { 
       //1.获取所选中的节点 
       var parent=$("#t1").tree("getSelected"); 
       $("#t1").tree("append",{ 
        parent:parent.target, 
        data:[{ 
         text:$("#dialogMenu").find("input[name=name]").val(), 
         attributes:{url:$("#dialogMenu").find("input[name=url]").val()} 
        }] 
       }); 
       //后台更新 
       $.ajax({ 
        type:"post", 
        url:"menuServlet?method=addMenu", 
        cache:false, 
        data:{ 
         parentId:parent.id, 
         name:$("#dialogMenu").find("input[name=name]").val(), 
         url:$("#dialogMenu").find("input[name=url]").val()  
        }, 
        dataType:"json", 
        success:function(result){ 
         //重新加载tree 
         $("#t1").tree("reload",parent.target); 
         $.messager.show({ 
           title:"提示信息", 
           msg:"操作成功" 
          }); 
        } 
       }); 
     }else{ 
       $.ajax({ 
        type:"post", 
        url:"menuServlet?method=updateMenu", 
        cache:false, 
        data:{ 
         id:$("#dialogMenu").find("input[name=id]").val(), 
         name:$("#dialogMenu").find("input[name=name]").val(), 
         url:$("#dialogMenu").find("input[name=url]").val()  
        }, 
        dataType:"json", 
        success:function(result){ 
         //重新加载tree,刷新所选中的节点的父节点 
         var node=$("#t1").tree("getSelected"); 
         var parentNode=$("#t1").tree("getParent",node.target); 
         $("#t1").tree("reload",parentNode.target); 
         $.messager.show({ 
           title:"提示信息", 
           msg:"操作成功" 
          }); 
        } 
       }); 
     } 
     //关闭dialog 
      $("#dialog").dialog("close"); 
    }); 
    $("#cancelbtn").click(function(){ 
    $("#dialog").dialog("close"); 
    }); 
  }); 
  function append(){ 
   flag="add"; 
   $("#dialogMenu").form("clear"); 
   $("#dialog").dialog("open"); 
  } 
  function removes(){ 
   //前台更新 
   //选中的节点 
   var selecteNode=$("#t1").tree("getSelected"); 
   $("#t1").tree("remove",selecteNode.target); 
   //后台更新 
   $.post("menuServlet?method=deleteMenu",{id:selecteNode.id},function(result){ 
     $.messager.show({ 
      title:"提示信息", 
      msg:"操作成功" 
     }); 
   }); 
  } 
  function editor(){ 
   flag="edit"; 
   //清空表单,把选中的节点填充到该dialog中,包括:id,name,url 
   $("#dialogMenu").form("clear"); 
   //选中的节点 
   var selecteNode=$("#t1").tree("getSelected"); 
   //填充数据 
   $("#dialogMenu").form("load",{ 
    id:selecteNode.id, 
    name:selecteNode.text, 
    url:selecteNode.attributes.url 
   }); 
   //打开dialog 
   $("#dialog").dialog("open"); 
  } 
 </script> 
 </head> 
 <body> 
 <div id="mm" class="easyui-menu" style="width:120px;"> 
  <div onclick="append()">Append</div> 
  <div onclick="editor()">Editor</div> 
  <div onclick="removes()">Remove</div> 
 </div> 
 <ul id="t1"></ul> 
 <div id="dialog" title="设置权限" class="easyui-dialog" style="width:400px" closed=true modal=true> 
  <form id="dialogMenu" method="post"> 
   <input type="hidden" name="id"/> 
   <table> 
    <tr> 
     <td>名称:</td> 
     <td><input type="text" name="name"/></td> 
    </tr> 
    <tr> 
     <td>url:</td> 
     <td><input type="text" name="url"/></td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <input id="savebtn" type="button" value="保存"/> 
      <input id="cancelbtn" type="button" value="取消"/> 
     </td> 
    </tr> 
   </table> 
  </form> 
 </div> 
 </body> 
</html> 
</span>
Javascript 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
webpack3之loader全解析
Oct 26 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 #Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 #Javascript
vue2项目使用sass的示例代码
Jun 28 #Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 #Javascript
详解webpack+angular2开发环境搭建
Jun 28 #Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 #Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 #Javascript
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
完美的php分页类
2017/10/24 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python多线程实例教程
2014/09/06 Python
python映射列表实例分析
2015/01/26 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python去掉行尾的换行符方法
2017/01/04 Python
儿童python练习实例
2018/05/27 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python实现简易数码时钟
2021/02/19 Python
python保留小数位的三种实现方法
2020/01/07 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
tensorflow 模型权重导出实例
2020/01/24 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
就业意向书范文
2014/04/01 职场文书
活动总结格式范文
2014/04/26 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
个人党性分析材料
2014/12/19 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技