ui框架（可以去官网下载jQuery easyUI的API和程序库）
easyui=jquery+html4（用来做后台的管理界面）
bootstrap=jquery+html5
案例：
1、通过layout布局
2、通过tree加载菜单
3、通过菜单去打开不同的tab页
var content = '<iframe scrolling="no" frameborder="0" src="'+menuUrl+'" width="99%" height="99%"></iframe>';
easyui控件的二种创建方式
1.1 直接通过html标签创建(定义easyui属性)
1.2 JS创建
1.3 easyui控件的方法调用
$(exp).panel('open')
1. 布局
1.1 layout
在下载的程序库里 jquery-easyui-1.5.1\demo\layout\full.html 找到full.html模板复制body的内容（包含body），导入EasyUI的CSS和Javascript文件到您的页面。
-
<%@ page language="java" contentType="text/html; charset=UTF-8" -
pageEncoding="UTF-8"%> -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
<html> -
<head> -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.5.1/themes/default/easyui.css"> -
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.5.1/themes/icon.css"> -
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.5.1/jquery.min.js"></script> -
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> -
<script type="text/javascript" src="${pageContext.request.contextPath }/js/index.js"></script> -
<title>主页</title> -
</head> -
<body class="easyui-layout"> -
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }"> -
<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="menuTerr"></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="tabs" class="easyui-tabs" style="width:100%;height:100%;"> -
<div title="Tab1" style="padding:20px;display:none;">首页</div> -
</div> -
</div> -
</body> -
</html>
2. tree、tabs
创建一个实体类（实现get、set方法和toString方法）
-
private String id; -
private String text; -
//描述父子节点，用于递归子节点 -
private List<TreeNode> children=new ArrayList<>(); -
//树形菜单节点，除了id和展示文本，可能还伴有页面跳转和图片展示等等，都放到属性的map集合中 -
private Map<String , Object> attributes=new HashMap<>();
dao层
-
public class MenuDao extends JsonBeanDao { -
/** -
* 查询需要展示树形菜单的数据 -
* 注意：该数据转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 Menuid = JsonUtils.getParanVal(paramMap, "Menuid"); -
String sql = "select * from t_easyui_menu where true"; -
//如果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<>(); -
mapTotreeNodeList(menuList, treeNodeList); -
treeNode.setChildren(treeNodeList); -
} -
private void mapTotreeNodeList(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, null); -
List<TreeNode> treeNodeList = new ArrayList<>(); -
mapTotreeNodeList(menuList, treeNodeList); -
return treeNodeList; -
} -
}
实现tree和tabs
-
$(function() { -
var ctx=$("#ctx").val(); -
-
$('#menuTerr').tree({ -
url:ctx+'/menuAction.action?methodName=menuTreeList', -
onClick: function(node){ -
-
if($('#tabs').tabs('exists',node.text)){ -
$('#tabs').tabs('select',node.text) -
}else{ -
-
$('#tabs').tabs('add',{ -
title:node.text, -
-
content:'<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>', -
closable:true, -
}); -
} -
} -
}); -
})
-来自龍晰小菜鸡
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
