java Easyui 快速入门
Jquery Easyui简介
现在市场上所主流的框架是Boostarp和Layui。Boostarp好用但是它组件要钱，Layui后台主流框架，使用简单而且它的组件都是免费的，虽然界面可能不及Boostarp那么出彩，但某些地方还是要胜过Boostarp。这两个框架现在在市面上算是比较流行的ui框架。而我们现在学的Easyui已经很少使用。原因主要是它的界面非常的不复合现在的审美。但是我们还是有学习它的必要性。学习它的目的不是用于项目开发，而是要掌握组建式开发。
EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等。 用户可以组合使用这些组件，也可以单独使用其中一个。
查看官方的文档，就会发现有如下组件,是不是很丰富，你要用到的组件基本上都能从中找到。
下载
下载：http://www.jeasyui.com/download/v18.php
目录简介
| 文件/文件夹 | 说明 |
|---|---|
| demo | EasyUI使用示例 |
| EasyUI使用示例 | EasyUI使用示例 |
| EasyUI使用示例 | EasyUI使用示例 |
| plugins | EasyUI使用的插件 |
| src | EasyUI使用的插件 |
| themes | EasyUI主题样式 |
| jquery.easyui.min.js | EasyUI核心JS文件 |
| jquery.easyui.mobile.js | EasyUI Mobile核心JS文件 |
| jquery.min.js | jQuery文件，EasyUI的依赖 |
项目引入
在页面中引入如下文件
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
<!-- 引入JQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
注意事项：
（1）jQuery与EasyUI两个js的引入顺序不能搞错，因为EasyUI本就是jQuery下的插件，需要jQuery做基础，因此先引用jQuery的js文件，再引用EasyUI的js文件。
（2）Css样式引用代码必须加上：rel=”stylesheet”，否则不会出效果。
下面就带着大家简单的使用一些EasyUI,结合我们的web项目如何来使用
EasyUI 布局（Layout）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Full Layout - jQuery EasyUI Demo</title>
<!-- 注意：JS有引顺序 -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/static/js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/static/js/themes/icon.css">
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/jquery.easyui.min.js"> </script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">我是上边</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">我是左边</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">我是右边</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">我是下边</div>
<div data-options="region:'center',title:'Center'">我是中间</div>
</body>
</html>
效果如下：
直接将上面代码copy上去就可以生成一个布局了，是不是很简单，复制粘贴就行了。更多布局方式可以参考文档
树形菜单
html代码实现
树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
效果如下：
JSON文件读取生成
上面的方法是通过html来定义一个树形菜单，但是当我们做权限的时候树形菜单的菜单项都是从后台读取的所有这时候使用上面的方式就比较死了。还好Easyui提供通过ajax请求来获取JSON数据，根据JSON数据来展示树形菜单的方式。非常的方便。
注意：JSON文件每个节点都具备以下属性
| 属性名 | 说明 |
|---|---|
| id | 每个节点都具备以下属性 |
| text | 显示节点文本。 |
| state | 节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。 |
| checked | 表示该节点是否被选中 |
| attributes | 被添加到节点的自定义属性。 |
| children | 一个节点数组声明了若干节点。 |
下面是tree_data1.json文件内容：
[{
"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"
}]
}]
在html页面定义标签
<ul id="tt"></ul>
JS文件
$('#tt').tree({
url:'tree_data.json'
});
html中*
<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>
<div
data-options="region:'east',split:true,collapsed:true,title:'East'"
style="width: 100px; padding: 10px;">east region</div>
<div data-options="region:'south',border:false"
style="height: 50px; background: #A9FACD; padding: 10px;">south
region</div>
<div data-options="region:'center',title:'Center'">
</div>
</body>
展示效果
将菜单存储在数据库中，使用Servlet+ajax实现树形菜单
重定是parentid,通过parentid来记录父节点id.从而生成一个树状结构
后台数据处理部分
TreeNode
这是节点实体类
public class TreeNode {
//节点id
private String id;
//文本
private String text;
//子节点集
private List<TreeNode> children;
//节点属性
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;
}
}
MenuDao
public class MenuDao extends JsonBaseDao {
/**
*
* @param map request.getParameterMap 参数对象
* @param pageBean 分页对象，这里不管他，树形菜单不分页，使用该值为null
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
public List<TreeNode> list(Map<String, String[]> map, PageBean pageBean)
throws InstantiationException, IllegalAccessException, SQLException {
//这是获取首层的节点 也就父节点id为 -1的决定
List<Map<String, Object>> listMenu = this.listMenu(map, pageBean);
//定义TreeNode阶段集合，使用TreeNode的原因是因为将TreeNode转成JSON格式符合EasyUI的规范
List<TreeNode> treeNodeList = new ArrayList<>();
//将listMenu集合中的Map<Stirng, Object>节点转为treeNodeList集合的TreeNode节点
//使用到了递归的思想，使用递归将每个节点的子节点查出来
menu2TreeNodeList(listMenu, treeNodeList);
return treeNodeList;
}
/**
* 这是查询指定父节点下的子节点
*
* @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 parentid = ";
// 该方法的作用是获取key为id的value数组值，如果有单个就显示单个值，如果有多个那么就显示拼接值，这里一般为单个
String id = JsonUtils.getParamVal(map, "id");
//如果id不等于null或去空格后不等于""，则返回true，否则返回false
if (StringUtils.isNotBlank(id)) {
sql = sql + id + " ";
} else {
// 未指定就使用默认的查询方式，即父节点为 -1的
sql = sql + "-1 ";
}
/**
* 这是去数据库查询这张表，Map集合的key记录列段名 value记录列段值，每一个Map代表一行，List就是查询出来的结果集合
*/
return super.executeQuery(sql, pageBean);
}
/**
* [{Menuid:1,.....[]},{Menuid:2,.....[]}] ->[{id:1,.....[]},{id:2,.....[]}]
* menu表的数据不符合easyui树形方式 需要转换成easyui能识别的格式。也就是TrreNode实体类
* Map -> TreeNode 因为将TreeNode转为JSON格式符合easyui的规范
* @param map 这是要转换的那那一个节点
* @param treeNode
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
private void menu2TreeNode(Map<String, Object> map, TreeNode treeNode)
throws InstantiationException, IllegalAccessException, SQLException {
//节点id树形设置
treeNode.setId(map.get("Menuid").toString());
//节点text(文本)树形设置
treeNode.setText(map.get("Menuname").toString());
//节点举行就将查询出来的那一行扔进去啦
treeNode.setAttributes(map);
Map<String, String[]> jspMap = new HashMap<String, String[]>();
// 这是指定父节点的id
jspMap.put("id", new String[] { treeNode.getId() });
// 获取该节点下面的子节点
List<Map<String, Object>> listMenu = this.listMenu(jspMap, null);
// 定义子节点存储集合
List<TreeNode> treeNodeList = new ArrayList<>();
// 这是将List<Map<String, Object>> 存储该为 List<TreeNode>格式 是为了符合easyui的定义
//这里使用了递归的实现，多看一下就能懂
menu2TreeNodeList(listMenu, treeNodeList);
treeNode.setChildren(treeNodeList);
}
private void menu2TreeNodeList(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);
}
}
}
请求的方法
private MenuDao menuDao = new MenuDao();
public String treeMenu(HttpServletRequest req, HttpServletResponse response) throws Exception {
List<TreeNode> list = this.menuDao.list(req.getParameterMap(), null);
ObjectMapper om = new ObjectMapper();
String jsonStr = om.writeValueAsString(list);
System.out.println(jsonStr);
// 将list集合转换成json串
ResponseUtil.write(response, jsonStr);
return "index";
}
前端 ajax请求数据
js
$(function(){
$('#tt').tree({
//这是请求路径
url:'menuAction.action?methodName=treeMenu'
});
})
html
<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>
<div
data-options="region:'east',split:true,collapsed:true,title:'East'"
style="width: 100px; padding: 10px;">east region</div>
<div data-options="region:'south',border:false"
style="height: 50px; background: #A9FACD; padding: 10px;">south
region</div>
<div data-options="region:'center',title:'Center'">
</div>
</body>
运行结果
tabs（结合的综合案例）
就以上面的树形菜地为例，当点击
菜单元素时出tabs页。这也时我们最后的综合案例
html
<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>
<div
data-options="region:'east',split:true,collapsed:true,title:'East'"
style="width: 100px; padding: 10px;">east region</div>
<div data-options="region:'south',border:false"
style="height: 50px; background: #A9FACD; padding: 10px;">south
region</div>
<div data-options="region:'center',title:'Center'">
<div id="menuTabs" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
</div>
</div>
</body>
js
$(function() {
$('#tt').tree({
//请求展示树形菜单的JSON数据
url : 'menuAction.action?methodName=treeMenu',
//点击tabs页触发的事件
onClick : function(node) {
/*
*node 是你点击tabs页的时的那个tabs页的对象
**/
//使用框架来连接页面
var content = '<iframe scrolling="on" 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');
}
} ]
});
}
}
});
})
最后的成果
404是没有定义这个路径的jsp页面，大家定义一下就ok啦
你的点赞是对作者的最大支持，比心
扫一扫
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
