jQuery easyUI

最新推荐文章于 2025-08-06 16:23:50 发布

落灬花

最新推荐文章于 2025-08-06 16:23:50 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery easyUI 文章标签： java

本文链接：https://blog.youkuaiyun.com/waz929/article/details/82839482

jQuery easyUI 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍使用EasyUI和Bootstrap框架进行网页布局的方法，包括layout布局应用、tree菜单加载及tabs页面切换技巧，同时提供了具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>';

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',//去数据库查询的url
	    	onClick: function(node){
                //如果选项卡打开了就选中打开的选项卡，没打开就添加一个选项卡
	    		if($('#tabs').tabs('exists',node.text)){
	    			$('#tabs').tabs('select',node.text)
	    		}else{
	    			//添加选项卡
		    		$('#tabs').tabs('add',{   
		    		    title:node.text,//你要打开的页面    
		    		    //页面的内容    src为你打开的页面的url，node.attributes.menuURL数据库查询出来的url
		    		    content:'<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>',    
		    		    closable:true,    
		    		});
	    		}
	    	}
	}); 
})