ui框架
easyui=jquery+html4(用来做后台的管理界面)
1、通过layout布局
2、通过tree加载菜单
3、通过菜单去打开不同的tab页
var content = '<iframe scrolling="no" frameborder="0" src="'+menuUrl+'" width="99%" height="99%"></iframe>';
<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>
将css和js给导入进去
[{
"id":1,
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1",
"checked":true
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop",
"checked":true
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}]
将tree的布局也给导进去
之后去数据库里面捞tree的字段 将表格给打印出来
同时也要建立对于的类
private String id;
private String text;
//描述父子节点,用于递归子节点
private List<TreeNode> children=new ArrayList<>();
//树形菜单的节点,除了ID以及展示文本,可能还伴有跳转页面或者图片展示,等等一系列的描述
//都将其放入到map集合中
private Map<String, Object> attributes=new HashMap<>();
但是这是在数据库里面区出来的是不能直接展示的,所以要把他转成json格式。
/**
* 查询后台需要属性展示的菜单表数据
* 注意:该数据转换成json对象,是不符合easyUI的tree主键展现的json格式
* @param map
* @param pageBean
* @return
* @throws Exception
*/
public List<Map<String, Object>> menuList(Map<String, String[]> map,PageBean pageBean) throws Exception{
String sql="select * from t_easyui_menu where true";
String menuid = JsonUtils.getMapVal(map, "Menuid");
if(StringUtils.isNotBlank(menuid)) {
sql+=" and parentid="+menuid;
}else {
sql+=" and parentid=-1";
}
return super.executeQuery(pageBean, sql);
}
/**
* 查出来的数据不能战术,转换为可展示的数据
* @param map
* @param treeNode
* @throws Exception
*/
private void mapToTreeNode(Map<String , Object > map ,TreeNode treeNode) throws Exception {
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> treeNodeslist) throws Exception {
TreeNode treeNode=null;
for (Map<String, Object> map : list) {
treeNode = new TreeNode();
mapToTreeNode(map, treeNode);
treeNodeslist.add(treeNode);
}
}
/**
* 这个方法的返回值,才是符合easyui的tree组件需要的
* @param map
* @param pageBean
* @return
* @throws Exception
*/
public List<TreeNode> menuTreeList(Map<String, String[]> map,PageBean pageBean) throws Exception{
List<Map<String, Object>> menuList = this.menuList(map, pageBean);
List<TreeNode> TreeNodelist= new ArrayList<>();
mapListToTreeNodeList(menuList, TreeNodelist);
return TreeNodelist;
}
这里会用递归给转成json格式
给表格加上事件,这里我加的是单击事件。
$(function(){
$('#menuTree').tree({
url:'menuAction.action?methodName=menuTreeList',
onClick: function(node){
// alert(node.attributes.menuURL);// 在用户点击的时候提示
//判断是第几次进入 如果是第二次就给他选中之前打开的页面,如果不是就给他打开一个新的页面
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:true
});
}
}
});
});