1.easyui的简介
easyui是什么呢?
首先easyui是一款非常好用的前端框架
一般是使用再后台管理系统
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui节省您网页开发的时间和规模。
easyui使用简单但是功能强大
2.下载地址
http://www.jeasyui.com/download/index.php
3.easyui的简单使用
Tree（树）
我们简单讲一下tree吧
首先tree是树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
下面我们进行一个案例吧
首先我们先导入easyui需要的架包
这些可以去网上下载
接着我们写一个jsp界面将这些路径找到
我们要写一个全路径进行查找
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/black/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/static/js/index.js"></script>
body内容
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
后台管理界面的菜单
<ul id="tt"></ul>
</div>
接着我们需要写一个js文件
里面的内容为
$('#tt').tree({
url:'tree_data.json'
});
这样就实现简单的树形结构了
使用tree展示数据库的数据
在简单的tree树形结构上我们再加一点难度
将数据库的数据展示再后台界面上
下面看案例
1.首先我们需要将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"
}]
}]
接下来我们需要建立一个实体类对属性进行封装
package com.yz.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 List<TreeNode> children = new ArrayList<>();
private Map<String, Object> 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<TreeNode> getChildren() {
return children;
}
public void setChildren(List<TreeNode> children) {
this.children = children;
}
public Map<String, Object> getAttributes() {
return attributes;
}
public void setAttributes(Map<String, Object> attributes) {
this.attributes = attributes;
}
@Override
public String toString() {
return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attributes=" + attributes + "]";
}
}
接下来我们需要写一个通用的basedao方法这里比较晕
package com.yz.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.yz.entity.TreeNode;
import com.yz.util.JsonBaseDao;
import com.yz.util.JsonUtils;
import com.yz.util.PageBean;
import com.yz.util.StringUtils;
public class MenuDao extends JsonBaseDao{
/**
* req.getparameterMap
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*
*/
public List<TreeNode> list(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
List<Map<String,Object>> listMenu = this.listMenu(map, pageBean);
List<TreeNode> treeNodeList = new ArrayList<>();
menuList2TreeNodeList(listMenu, treeNodeList);
return treeNodeList;
}
/**
* 1.查询menu 表的子节点的数据
* @param map
* @param pageBean
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List<Map<String, Object>> listMenu(Map<String, String[]> 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);
}
/**{Menuid:1。。。}转成{id:1,....}
* menu表的数据不符合easyui树形展示的数据
* 需要转换成easyui所能识别的数据格式
* @param map
* @param treeNode
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
private void menu2TreeNode(Map<String, Object>map,TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
treeNode.setId(map.get("Menuid").toString());
treeNode.setText(map.get("Menuname").toString());
treeNode.setAttributes(map);
Map<String, String[]> jspMap = new HashMap<>();
jspMap.put("id", new String[] {treeNode.getId()});
List<Map<String, Object>> listMenu = this.listMenu(jspMap, null);
List<TreeNode> treeNodeList = new ArrayList<>();
menuList2TreeNodeList(listMenu, treeNodeList);
treeNode.setChildren(treeNodeList);
}
private void menuList2TreeNodeList(List<Map<String, Object>>mapList,List<TreeNode> treeNodeList) throws InstantiationException, IllegalAccessException, SQLException {
TreeNode treeNode = null;
for (Map<String, Object> map : mapList) {
treeNode = new TreeNode();
menu2TreeNode(map, treeNode);
treeNodeList.add(treeNode);
}
}
}
剩下的就是web中action控制器了
package com.yz.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.yz.dao.MenuDao;
import com.yz.entity.TreeNode;
import com.yz.util.ResponseUtil;
import com.zking.framework.ActionSupport;
public class MenuAction extends ActionSupport{
private MenuDao menuDao= new MenuDao();
public String treeMenu(HttpServletRequest req, HttpServletResponse resp) throws Exception {
try {
List<TreeNode> list = this.menuDao.list(req.getParameterMap(), null);
ObjectMapper om = new ObjectMapper();
//转换成json
String jsonStr = om.writeValueAsString(list);
ResponseUtil.write(resp, jsonStr);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
千万不要忘记配置mvc.xml 还有web.xml。
最后我们将index.js的代码改一下
$('#tt').tree({
url:'menuAction.action?methodName=treeMenu'
});
看下图效果
tabs
我们讲的第二个内容就说layout布局中的tabs
tabs是什么作用呢？
选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
下面我们进行一个案例
首先我们需要再index.jsp界面中写一个标签
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
接下来我们做一个给小工具
这个是基于上一个tree树形结构
为了防止重复弹出选项卡
我们用到if 判断重复
$(function () {
$('#tt').tree({
url:'menuAction.action?methodName=treeMenu',
onClick:function(node){
var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
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');
}
}]
});
}
}
});
})
最后的结果为
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
