easyui(一)
一.UI框架
- easyui=jquery+html4（用来做后台的管理界面）
- bootstrap=jquery+html5
- layui
二.案例
要求：
- 通过layout布局
- 通过tree加载菜单
- 通过菜单去打开不同的tab页
开始步骤：
导入资料里文件
打开API将内容复制到jsp页面
找到对应的文件路径改成如下
jsp页面代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
后台管理主界面
north
region
左侧的菜单栏加载区域
east region
south
region
将util包里面的类导进来
导入树形的结构目录（需与jsp页面同级）
[{
"id":1,
"text":"顶级菜单",
"children":[{
"id":11,
"text":"学生管理",
"state":"closed",
"children":[{
"id":111,
"text":"特色课程"
},{
"id":112,
"text":"作业提交"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"后勤管理",
"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"
}]
}]
开始正式编码
针对easyUI树形展示的json格式经行了实体类的描述，编写一个实体类
package com.xfz.entity;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* @author ld
* 针对easyUI树形展示的json格式经行了实体类的描述
*
*/
public class TreeNode {
private String id;
private String text;
private List children=new ArrayList();
private Map attributes=new HashMap();
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public List getChildren() {
return children;
}
public void setChildren(List children) {
this.children = children;
}
public Map getAttributes() {
return attributes;
}
public void setAttributes(Map attributes) {
this.attributes = attributes;
}
@Override
public String toString() {
return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attributes=" + attributes + "]";
}
}
配置mvc.xml
写一个menudao继承jsonbasedao
package com.xfz.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.xfz.entity.TreeNode;
import com.xfz.util.JsonBaseDao;
import com.xfz.util.JsonUtils;
import com.xfz.util.PageBean;
import com.xfz.util.StringUtils;
/**
* @author ld
* 1、查询数据库所有数据用于easyui的tree树形展示（但是直接得来的数据格式easyui不识别）
* 2、递归查询节点集合，形成子父节点关系，具备层次结构
* 3、转格式
*/
public class MenuDao extends JsonBaseDao{
/**
* @author ld
* List加上ObjectMapper可以转换成easyui的tree控件识别的json串
*
*/
public List listTreeNode(Map map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
List> listMenu = this.listMenu(map, pageBean);
List listTreeNode = new ArrayList();
this.listMapToTreeNode(listMenu, listTreeNode);
return listTreeNode;
}
/**
* @param map
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
* List>
* 返的是：{Menuid:001,Menuname:学生管理,childen[]},{Menuid:001,Menuname:学生管理}
* 接下来需要递归查询子节点的集合存入当前节点
*/
public List> listMenu(Map map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="select * from t_easyui_menu where true";
String id=JsonUtils.getParamVal(map, "Menuid");
if(StringUtils.isNotBlank(id)) {
//当前节点的id当做子节点父id进行查询
sql+=" and parentid="+id;
}else {
sql+=" and parentid=-1";
}
return super.executeQuery(sql, pageBean);
}
/**
* @param map
* @param treeNode
* 需要将后台的数据库查出来的数据格式转换成前台easyui所识别的数据
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public void mapToTreeNode(Map map,TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
treeNode.setId(map.get("Menuid").toString());
treeNode.setText(map.get("Menuname").toString());
treeNode.setAttributes(map);
// treeNode.setChildren(children);
Map childMap=new HashMap();
childMap.put("Menuid", new String[] {treeNode.getId()});
//查询出当前节点所拥有的子节点的集合
List> listMenu=this.listMenu(childMap, null);
List listTreeNode=new ArrayList();
this.listMapToTreeNode(listMenu, listTreeNode);
treeNode.setChildren(listTreeNode);
}
public void listMapToTreeNode(List> list, List listTreeNode) throws InstantiationException, IllegalAccessException, SQLException {
TreeNode treeNode=null;
for (Map map : list) {
treeNode=new TreeNode();
this.mapToTreeNode(map, treeNode);
listTreeNode.add(treeNode);
}
}
}
配置web.xml
web_easyui
index.html
index.htm
index.jsp
default.html
default.htm
default.jsp
encodingFiter
com.xfz.util.EncodingFiter
encodingFiter
/*
actionServlet
com.zking.framework.ActionServlet
actionServlet
*.action
再写一个menuaction类继承actionsupport
package com.xfz.web;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.xfz.dao.MenuDao;
import com.xfz.entity.TreeNode;
import com.zking.framework.ActionSupport;
import com.xfz.util.ResponseUtil;
public class MenuAction extends ActionSupport{
private MenuDao menuDao = new MenuDao();
public String menuTree(HttpServletRequest req,HttpServletResponse resp) {
try {
List listTreeNode = this.menuDao.listTreeNode(req.getParameterMap(), null);
ObjectMapper om = new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(listTreeNode));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
index.js (bug：会开多数重复的选项卡，用exists判重)
$(function() {
$('#tt').tree({
url:'menuAction.action?methodName=menuTree',
onClick:function(node){
//alert(node.attributes.menuURL);//在用户点击的时候提示
var content = '';
if($("#menuTab").tabs('exists',node.text)){
$("#menuTab").tabs('select',node.text)
}else{
$("#menuTab").tabs('add',{
title:node.text,
content:content,
closable:true,
})
}
}
});
})
显示效果：
