引用官网介绍:http://www.jeasyui.net/
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
easyUI下载地址:http://www.jeasyui.com/download/v16.php
案例:
1、通过layout布局
下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<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;">west content</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>
2、通过tree加载菜单
导入EasyUI的tree_data1.json文件,放在WebContent下
**创建一个实体类**
private String id;
private String text;
//描述父子节点,用于递归字节点.
private List<TreeNode> children = new ArrayList<>();
//树形菜单的节点,除了id以及展示文本,可能还伴有跳转页面,或者图片展示,等等一系列的描述都将其放到属性的map集合中
private Map<String, Object> attributes = new HashMap<>();
//jsonBaseDao
**dao包**
public class MenuDao extends JsonBaseDao{
/**
* 查询后台需要树形展示的菜单表数据
* 注意:该数据转换成json对象,是不符合easyui的tree组件展现的json格式
* @param paramMap
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
public List<Map<String, Object>> menuList(Map<String, String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_menu where true";
String menuId = JsonUtils.getParamVal(paramMap, "Menuid");
//如果Menuid不为空就通过menuid去查,如果为空的话我们就给他通过默认值
if (StringUtils.isNotBlank(menuId)) {
sql += " and parentid="+menuId;
} else {
sql += " and parentid=-1";
}
return super.executeQuery(sql, pageBean);
}
/**
* 直接查出来的数据不能展示,转换成可展示的数据
* @param map
* @param treeNode
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
private void mapToTreeNode(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[]> paramMap = new HashMap<>();
//把当前节点的id当作父id,查出所有的子节点
paramMap.put("Menuid", new String[] {treeNode.getId()});
List<Map<String, Object>> menuList = this.menuList(paramMap, null);
List<TreeNode> treeNodeList = new ArrayList<>();
mapListToTreeNodeList(menuList, treeNodeList);
treeNode.setChildren(treeNodeList);
}
private void mapListToTreeNodeList(List<Map<String, Object>> list,List<TreeNode> treeNodeList) throws InstantiationException, IllegalAccessException, SQLException {
TreeNode treeNode = null;
for (Map<String, Object> map : list) {
treeNode = new TreeNode();
mapToTreeNode(map, treeNode);
treeNodeList.add(treeNode);
}
}
/**
* 符合easyui的tree组件所需要的json格式
* @param paramMap
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
public List<TreeNode> menuTreeList(Map<String, String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
List<Map<String,Object>> menuList = this.menuList(paramMap, pageBean);
List<TreeNode> treeNodeList = new ArrayList<>();
mapListToTreeNodeList(menuList, treeNodeList);
return treeNodeList;
}
}
**web包**
private MenuDao menuDao = new MenuDao();
public String menuTreeList(HttpServletRequest req,HttpServletResponse resp) {
try {
List<TreeNode> treeList = this.menuDao.menuTreeList(req.getParameterMap(), null);
ObjectMapper om = new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(treeList));
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (JsonProcessingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
3、通过菜单去打开不同的tab页
//这段div加在<div data-options="region:'center',title:'Center'"></div>中
<div id="menuTab" class="easyui-tabs" style="">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
</div>
$(function(){
//树形菜单
$('#menuTree').tree({
url:'menuAction.action?methodName=menuTreeList',//去数据库查询的url
onClick: function(node){
//如果选项卡打开了就选中打开的选项卡,没打开就添加一个选项卡
if ($('#menuTab').tabs('exists',node.text)) {
$('#menuTab').tabs('select',node.text)
}else{
//添加选项卡
$('#menuTab').tabs('add',{
title:node.text,
content:'<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>',
closable:false
});
}
}
});
})