easy

最新推荐文章于 2022-06-18 23:51:59 发布

「已注销」

最新推荐文章于 2022-06-18 23:51:59 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/tqfooo/article/details/82844400

版权

ui框架
easyui=jquery+html4（用来做后台的管理界面）
bootstrap=jquery+html5
案例：
1、通过layout布局
2、通过tree加载菜单
3、通过菜单去打开不同的tab页

布局
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}/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 


<title>主页</title>
</head>
<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="menuTree"></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>

</html>

tree、tabs
创建一个实体类（实现get、set方法和toString方法）

private  String id;
	private  String text;
	//描述父子节点用于递归子节点
	private  List<TreeNode> children=new ArrayList<>();
	//树形菜单的节点,除了Id以及展示文本,可能还伴有页面跳转,或者图片展示 等等2一系列的描述
	//都将放到属性的map集合
	private  Map<String, Object> attributes=new HashMap<>();

dao层

package com.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.entity.TreeNode;
import com.util.JsonBaseDao;
import com.util.JsonUtil;
import com.util.PageBean;
import com.util.StringUtils;

public class MenuDao extends JsonBaseDao {
	/**
	 * 查询后台需要展示的菜单表数据
	 * 注意 ： 该数据转换为json对象, 是不符合easyui的tree组建展现的json格式
	 * @param paraMap
	 * @param pageBean
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	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 = JsonUtil.getParaVal(paramMap, "Menuid");
		if(StringUtils.isNotBlank(menuId)) {
			sql+=" and parentid="+menuId;
		}else {
			sql+=" and parentid=-1";
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * 直接查出来的数据不能展示 转换成可展示的数据
	 * @param paramMap
	 * @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);
	//	treeNode.setChildren(children);
		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<>();
		mapLsitToTreeNodeList(menuList, TreeNodeList);
		treeNode.setChildren(TreeNodeList);
	}
	
	private void mapLsitToTreeNodeList(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<>();
		mapLsitToTreeNodeList(menuList, TreeNodeList);
		return TreeNodeList;
	}
	
	
	
	
	

}

实现tree和tabs

$(function(){
	$('#menuTree').tree({    
	    url:'menuAction.action?methodNme=menuTreeList' ,
	    onClick: function(node){
			alert(node.text);  // 在用户点击的时候提示
			if($('#menuTab').tabs('exists',nodex.text)){
				$('#menuTab').tabs('select',nodex.text)
			}else{
			$('#menuTab').tabs('add',{    
			    title:'node.text',    
			    content:'<iframe scrolling="no" frameborder="0" src="'+node.attributes.menURL+'" width="99%" height="99%"></iframe>',    
			    closable:false,    
			  
			});  

		}
	    }

	}); 
})

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easy

ui框架easyui=jquery+html4（用来做后台的管理界面）bootstrap=jquery+html5案例：1、通过layout布局2、通过tree加载菜单3、通过菜单去打开不同的tab页布局1.1 layout在下载的程序库里 jquery-easyui-1.5.1\demo\layout\full.html 找到full.html模板复制body的内容（包含b...
复制链接

扫一扫