easyUI框架
easyui 简介
①首先easyui是一款非常好用的前端框架
一般是使用再后台管理系统
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui节省您网页开发的时间和规模。
②其缺陷就是相对于其他的前端框架来说，样式可能没有那么美观，像boostrap框架就相对于比较好看。
今天来简单介绍一下easyui里的layout(布局) tree(树形菜单) tab页
在写之前要导入其对应的包
①首先来讲一下 layout
我们先要在jsp界面引入其对应的css文件，以及jquery文件
north region
后台管理界面的菜单
east region
south region
效果如下图:
②接下来我来讲一下Tree树形菜单，这也是难点
接着我们写一个jsp界面将这些路径找到
我们要写一个全路径进行查找
接着我们需要写一个js文件
$('#tt').tree({
url:'tree_data.json'
});
首先我们需要将json文件导入web项目中
[{
"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"
}]
}]
接下来我们需要写一个实体类TreeeNode
package com.liuting.entity;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class TreeNode {
private String id;
private String text;
private Map attributes = new HashMap<>();
private List children = new ArrayList<>();
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 Map getAttributes() {
return attributes;
}
public void setAttributes(Map attributes) {
this.attributes = attributes;
}
public List getChildren() {
return children;
}
public void setChildren(List children) {
this.children = children;
}
public TreeNode(String id, String text, Map attributes, List children) {
super();
this.id = id;
this.text = text;
this.attributes = attributes;
this.children = children;
}
public TreeNode() {
super();
}
@Override
public String toString() {
return "TreeNode [id=" + id + ", text=" + text + ", attributes=" + attributes + ", children=" + children + "]";
}
}
②再来写一个MenuDao
package com.liuting.dao
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.zking.entity.TreeNode;
import com.zking.util.JsonBaseDao;
import com.zking.util.JsonUtils;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class MenuDao extends JsonBaseDao {
/**
* map req.getParameterMap
* pageBean 分页
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List list(Map map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
List> listMenu = this.listMenu(map, pageBean);
List treeNodeList=new ArrayList<>();
menuList2TreeNodeList(listMenu, treeNodeList);
return treeNodeList;
}
/**
* 查询menu表的数据
* @param map
* @param pageBean
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
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, "id");
if(StringUtils.isNotBlank(id)) {
sql=sql+" and parentid="+id;
}else {
sql= sql+" and parentid =-1";
}
return super.executeQuery(sql, pageBean);
}
/**
* menu表达数据不符合树形展示的数据格式
* 需要转成easyui所能识别的数据格式
* @param map
* @param treeNode
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
private void menu2TreeNode(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
Map jspMap=new HashMap<>();
jspMap.put("id", new String[] {treeNode.getId()});
List> listMenu = this.listMenu(jspMap, null);
List treeNodeList=new ArrayList<>();
menuList2TreeNodeList(listMenu, treeNodeList);
treeNode.setChildren(treeNodeList);
}
private void menuList2TreeNodeList(List> mapList, List treeNodeList) throws InstantiationException, IllegalAccessException, SQLException {
TreeNode treeNode=null;
for (Map map : mapList) {
treeNode=new TreeNode();
menu2TreeNode(map, treeNode);
treeNodeList.add(treeNode);
}
}
}
③接下来写一个MenuAction
import java.sql.SQLException;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.dao.MenuDao;
import com.zking.entity.TreeNode;
import com.zking.framework.ActionSupport;
import com.zking.util.ResponseUtil;
public class MenuAction extends ActionSupport {
private MenuDao menuDao=new MenuDao();
public String treeMenu(HttpServletRequest req,HttpServletResponse resp) throws Exception {
try {
List list = this.menuDao.list(req.getParameterMap(), null);
ObjectMapper om=new ObjectMapper();
String jsonStr = om.writeValueAsString(list);
ResponseUtil.write(resp, jsonStr);
} catch (InstantiationException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
④最后来配置xml
效果如下图:
最后我们来讲通过菜单去打开不同的tab页，以及对tab页进行判重复
首先我们需要再index.jsp界面中写一个标签
这个是基于上一个tree树形结构
为了防止重复弹出选项卡
我们用到if 判断重复
$(function () {
$('#tt').tree({
url:'menuAction.action?methodName=treeMenu',
onClick:function(node){
var content = '';
if($('#menuTabs').tabs('exists',node.text)){
$('#menuTabs').tabs('select',node.text)
}else{
$('#menuTabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
}
});
})
效果如下图:
