4.11easyui

最新推荐文章于 2020-02-27 21:19:47 发布

哈西哈希

最新推荐文章于 2020-02-27 21:19:47 发布

阅读量431

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/shan_111/article/details/72823198

版权

easyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

注意：

href只能加载页面的html代码

而content可以加载页面的所有代码。

1、tree树形组件

easyUI.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script language="javascript">
jQuery(function(){
	var loadURL = "<%=path%>/menuAction!listTree?date="+new Date()+"";
	$('#tree_div').tree({ 
		method:		"get",
		url:		loadURL,
		checkbox:	true,
		lines:		true 
	});  


});
</script>
</head>  
<body>
	<div id="tree_div"></div>


</body>
</html>

MenuAction.java里的一个行数

	public String listTree() throws Exception {
		//存放的是父节点ID为0的节点的。
		List<Map<String, Object>> treeList = new ArrayList<Map<String, Object>>();
		Map<String, Object> treeNode = null;//存放的是树里面的一个节点
		//这个是拿来到时候子节点根据父ID来查找父节点的时候用的。
		Map<String, Map<String, Object>> id_nodeMap = new LinkedHashMap<String, Map<String, Object>>();
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;
		String sql = "Select * From T_Sys_Menu order by menu_id asc";
		try {
			conn = JdbcUtil.getConn();
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);
			while (rs.next()) {
				String menu_id = rs.getString("menu_id");
				String menu_name = rs.getString("menu_name");

				String menu_href = rs.getString("menu_href");
				String menu_target = rs.getString("menu_target");
				String parentid = rs.getString("parentid");
				int grade = rs.getInt("grade");
				int isLeaf = rs.getInt("isleaf");

				treeNode = new HashMap<String, Object>();
				treeNode.put("id", menu_id);
				treeNode.put("text", menu_name);
				treeNode.put("isLeaf", isLeaf);
				treeNode.put("menu_href", menu_href);
				if (grade >= 2 && isLeaf == 0) {
					treeNode.put("state", "closed");
				}

				id_nodeMap.put(menu_id, treeNode);

				if (parentid.equals("0")) {
					treeList.add(treeNode);
				} else {
					/**
					 * 根据parentid来寻找对应的父节点，将自已本身放到父节点的children下面。
					 */
					Map<String, Object> parentNode = id_nodeMap.get(parentid);
					List<Map<String, Object>> childList = null;
					if (parentNode.get("children") == null) {
						childList = new ArrayList<Map<String, Object>>();
					} else {
						childList = (List<Map<String, Object>>) parentNode
								.get("children");
					}
					childList.add(treeNode);
					parentNode.put("children", childList);
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			JdbcUtil.closeResource(rs, stmt, conn);
		}

		Gson gson = new Gson();
		String jsonStr = gson.toJson(treeList);
		PrintWriter out = response.getWriter();
		out.print(jsonStr);
		out.flush();
		return NONE;
	}

上面的树的数据格式为

2、树形表格

普通的显示树形表格的代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script language="javascript">
jQuery(function(){
	var loadURL = "<%=path%>/menuAction!listTreeGrid?date="+new Date()+"";
	$('#tree_div').treegrid({ 
	    url:			loadURL,  
//	    fit:			true,  
	    idField:		'menu_id',    
	    treeField:		'menu_name',    
	    columns:[[    
	        {field:'menu_id',	title:'菜单编码',		width:80},    
	        {field:'menu_name',	title:'菜单名称',	width:260,align:'left'},    
	        {field:'menu_href',	title:'菜单链接',	width:180},    
	        {field:'parentid',	title:'父编码',		width:80},
            {field:'grade',		title:'级别',		width:80},
            {field:'isLeaf',	title:'是否明细',	width:80}
	    ]]
	});  


});
</script>
</head>  
<body class="easyui-layout">
	  	<div id="tree_div"></div>
</body>
</html>

MenuAction.java

	public String listTreeGrid() throws Exception {
		Map<String, Object> treeData = new LinkedHashMap<String, Object>();
		List<Map<String, Object>> treeList = new ArrayList<Map<String, Object>>();
		Map<String, Object> treeNode = null;
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;
		String sql = "";
		sql = "Select * From t_menu order by menu_id asc";
		System.out.println("查询语句 = " + sql);

		try {
			conn = JdbcUtil.getConn();
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);
			while (rs.next()) {
				String menu_id = rs.getString("menu_id");
				String menu_name = rs.getString("menu_name");
				String menu_href = rs.getString("menu_href");
				String parentid = rs.getString("parent_id");
				int grade = rs.getInt("grade");
				int isLeaf = rs.getInt("isleaf");
				treeNode = new HashMap<String, Object>();
				treeNode.put("menu_id", menu_id);
				treeNode.put("menu_name", menu_name);
				treeNode.put("menu_href", menu_href);
				treeNode.put("parent_id", parentid);
				treeNode.put("grade", grade);
				treeNode.put("isLeaf", isLeaf);
				
				if (parentid.equals("0") == false) {
					treeNode.put("_parentId", parentid);
				}
				if (grade >= 2 && isLeaf == 0) {
					treeNode.put("state", "closed");
				}
				treeList.add(treeNode);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			JdbcUtil.closeResource(rs, stmt, conn);
		}

		treeData.put("total", treeList.size());
		treeData.put("rows", treeList);
		Gson gson = new Gson();
		String jsonStr = gson.toJson(treeData);
		PrintWriter out = response.getWriter();
		out.print(jsonStr);
		out.flush();
		return NONE;
	}

下面是有带查询的树形表格的例子：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script language="javascript">
jQuery(function(){
	var loadURL = "<%=path%>/menuAction!listTreeGrid?date="+new Date()+"";
	$('#tree_div').treegrid({ 
	    url:			loadURL,  
	    fit:			true,  
	    idField:		'menu_id',    
	    treeField:		'menu_name',    
	    columns:[[    
	        {field:'menu_id',	title:'菜单编码',		width:80},    
	        {field:'menu_name',	title:'菜单名称',	width:260,align:'left'},    
	        {field:'menu_href',	title:'菜单链接',	width:180},    
	        {field:'parentid',	title:'父编码',		width:80},
            {field:'grade',		title:'级别',		width:80},
            {field:'isLeaf',	title:'是否明细',	width:80}
	    ]],
	    toolbar:		[
	    	{id:"search",			text:"查询菜单名称",		iconCls:"icon-search",handler:function(){
	    		var menu_name = jQuery("#menu_name").val();
	    		
	    		var paramObj = {
	    			"menu_name":		menu_name
	    		};
	    		
	    		//提交参数   		
				jQuery("#tree_div").treegrid({
					queryParams: paramObj
				});   	
	    	}},
	    	{id:"import",			text:"导入",			iconCls:"icon-undo"}
	    ]	     
	});  


});
</script>
</head>  
<body class="easyui-layout">
	<div id="div_north" data-options="region:'north'">
  	<form id="searchForm">
		<table width="98%" border="0" style="font-size:12px;">
			<tr>
				<td align="right">菜单名称：</td>
				<td><s:textfield name="menu_name" id="menu_name"/> </td>
			</tr>								
		</table>	 	
  	</form>
	</div>
	  <div id="div_center" data-options="region:'center'">
	  	<div id="tree_div"></div>
	  </div>	
</body>
</html>

MenuAction.java

在讲这个之前，得先说下MySQL递归查询树状表的子节点、父节点具体实现。因为这里的查询条件是输入子节点的菜单名称去查询的，当我们要显示查询结果的时候，也得把查询出来的子节点的父节点也显示出来，这样才能显示为树状。所以当我们查询到子节点的时候，还得同时查到他的父节点，这时我们就要用到MySQL的递归查询树状表的父节点这个方法了。下面我们就讲下MySQL递归查询树状表的子节点、父节点具体实现。

2.1：

表结构和表数据就不公示了，查询的表t_menu，主键是id，每条记录有parent_id字段（对应该记录的父节点，当然，一个父节点自然会有一个以上的子节点嘛）

首先得先新建个查询，执行以下语句：

CREATE FUNCTION `getParentList`(rootId INT) 
RETURNS varchar(1000) 
BEGIN 
DECLARE sParentList varchar(1000); 
DECLARE sParentTemp varchar(1000); 
SET sParentTemp =cast(rootId as CHAR); 
WHILE sParentTemp is not null DO 
IF (sParentList is not null) THEN 
SET sParentList = concat(sParentTemp,',',sParentList); 
ELSE 
SET sParentList = concat(sParentTemp); 
END IF; 
SELECT group_concat(parent_id) INTO sParentTemp FROM t_menu where FIND_IN_SET(menu_id,sParentTemp)>0; 
END WHILE; 
RETURN sParentList; 
END;

执行完后就会生成一个函数 getParentList().
这时你可以执行查询语句

select * From t_menu where FIND_IN_SET(menu_id, getParentList(101));

menu_id是t_menu表的主键名，101是你要查询的t_menu里的menu_id的值。

这时的查询结果就是menu_id等于101的记录的值，和其它menu_id等于101对应的那条记录的parent_id的记录的值。

因为怕不详细，所以我顺便贴出我查找的博客的代码：

 
CREATE FUNCTION `getChildList`(rootId INT) 
RETURNS varchar(1000) 
BEGIN 
DECLARE sChildList VARCHAR(1000); 
DECLARE sChildTemp VARCHAR(1000); 
SET sChildTemp =cast(rootId as CHAR); 
WHILE sChildTemp is not null DO 
IF (sChildList is not null) THEN 
SET sChildList = concat(sChildList,',',sChildTemp); 
ELSE 
SET sChildList = concat(sChildTemp); 
END IF; 
SELECT group_concat(id) INTO sChildTemp FROM user_role where FIND_IN_SET(parentid,sChildTemp)>0; 
END WHILE; 
RETURN sChildList; 
END; 
/*获取子节点*/ 
/*调用: 1、select getChildList(0) id; 2、select * 5From user_role where FIND_IN_SET(id, getChildList(2));*/ 


CREATE FUNCTION `getParentList`(rootId INT) 
RETURNS varchar(1000) 
BEGIN 
DECLARE sParentList varchar(1000); 
DECLARE sParentTemp varchar(1000); 
SET sParentTemp =cast(rootId as CHAR); 
WHILE sParentTemp is not null DO 
IF (sParentList is not null) THEN 
SET sParentList = concat(sParentTemp,',',sParentList); 
ELSE 
SET sParentList = concat(sParentTemp); 
END IF; 
SELECT group_concat(parentid) INTO sParentTemp FROM user_role where FIND_IN_SET(id,sParentTemp)>0; 
END WHILE; 
RETURN sParentList; 
END; 
/*获取父节点*/ 
/*调用: 1、select getParentList(6) id; 2、select * From user_role where FIND_IN_SET(id, getParentList(2));*/

好啦！现在我们回到menuActiion.java这里去

2.2、下面我们看下查询对应的那个函数：

	public String listTreeGrid() throws Exception {
	Map<String, Object> treeData = new LinkedHashMap<String, Object>();
	List<Map<String, Object>> treeList = new ArrayList<Map<String, Object>>();
	Map<String, Object> treeNode = null;

	/**
	 * 接收查询参数
	 */
	String param_menu_name = request.getParameter("menu_name");
	StringBuffer tempBuffer = new StringBuffer();
	System.out.println("menu_name = " + param_menu_name);
	Connection conn = null;
	Statement stmt = null;
	ResultSet rs = null;
	if (StringUtils.isNotEmpty(param_menu_name)) {
		/**
		 * 有查询参数的情况
		 */
		String tempSQL = "Select menu_id From T_menu where menu_name like '%"
				+ param_menu_name
				+ "%' and isleaf = 1 order by menu_id asc";

		try {
			conn = JdbcUtil.getConn();
			stmt = conn.createStatement();
			rs = stmt.executeQuery(tempSQL);
			int rowCount = 0;
			while (rs.next()) {
				String temp_menu_id = rs.getString("menu_id");
				if (rowCount > 0) {
					tempBuffer.append(" union ");
				}
				//这一句查询语句是获取父节点，是通过调用getParentList()函数来实现的。
				tempBuffer.append("select * from t_menu where FIND_IN_SET(menu_id ,getParentList("+temp_menu_id+"))");
				rowCount++;
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			JdbcUtil.closeResource(rs, stmt, conn);
		}
	}

	String sql = "";
	if (StringUtils.isNotEmpty(param_menu_name)) {
		sql = "Select * From T_menu where menu_id in (";
		sql = sql + "select menu_id from (";
		sql = sql + tempBuffer.toString();
		sql = sql + ") t";
		sql = sql + ")";
		sql = sql + " order by menu_id asc	";
	} else {
		sql = "Select * From T_Menu order by menu_id asc";
	}

	System.out.println("查询语句 = " + sql);

	try {
		conn = JdbcUtil.getConn();
		stmt = conn.createStatement();
		rs = stmt.executeQuery(sql);
		while (rs.next()) {
			String menu_id = rs.getString("menu_id");
			String menu_name = rs.getString("menu_name");

			String menu_href = rs.getString("menu_href");
			String parentid = rs.getString("parent_id");
			int grade = rs.getInt("grade");
			int isLeaf = rs.getInt("isleaf");
			treeNode = new HashMap<String, Object>();

			treeNode.put("menu_id", menu_id);
			if (StringUtils.isBlank(param_menu_name)) {
				treeNode.put("menu_name", menu_name);
			} else {
				//显示的时候，将和查询的字相同的显示为红色
				String new_menu_name = menu_name.replaceAll(
						param_menu_name, "<font color='red'>"
								+ param_menu_name + "</font>");

				treeNode.put("menu_name", new_menu_name);
			}

			treeNode.put("menu_href", menu_href);
			treeNode.put("parent_id", parentid);
			treeNode.put("grade", grade);
			treeNode.put("isLeaf", isLeaf);
			//这个是区别显示父节点与子节点
			if (parentid.equals("0") == false) {
				treeNode.put("_parentId", parentid);
			}
			if (grade >= 2 && isLeaf == 0) {
				treeNode.put("state", "closed");
			}
			treeList.add(treeNode);
		}
	} catch (Exception e) {
		e.printStackTrace();
	} finally {
		JdbcUtil.closeResource(rs, stmt, conn);
	}

	treeData.put("total", treeList.size());
	treeData.put("rows", treeList);
	Gson gson = new Gson();
	String jsonStr = gson.toJson(treeData);
	PrintWriter out = response.getWriter();
	out.print(jsonStr);
	out.flush();
	return NONE;
}

这里我们输入查询条件值为“查询”时的执行的sql语句为：

Select * From T_menu
	 where menu_id in (
        select menu_id from (
   	select * from t_menu where FIND_IN_SET(menu_id ,getParentList(104)) 
	union select * from t_menu where FIND_IN_SET(menu_id ,getParentList(204)) 
	union select * from t_menu where FIND_IN_SET(menu_id ,getParentList(405))) t) order by menu_id asc

3、选项卡

例子：

easyui_tabpanel.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script language="javascript">

jQuery(function(){
	$('#tt').tabs({    
	toolPosition:'left', 
	tabPosition: 'top', 
    tools:[{
		iconCls:'icon-add',
		handler:function(){
			alert('添加')
		}
	},{
		iconCls:'icon-save',
		handler:function(){
			alert('保存')
		}
	}]
});  
	var editURL = "<%=path%>/easyui_panel.jsp";
	jQuery("#tt").tabs("add",{
		title:"content加载",
		iconCls:'icon-reload',
		closable:true,
		selected:true,
		content:		"<iframe height=\"95%\" width=\"100%\" border=\"0\" frameborder=\"0\" src=\""+editURL+"\" name=\"roleFrame\" id=\"roleFrame\" title=\"roleFrame\"></iframe>"
	});
	
	jQuery("#tt").tabs("disableTab",1);
	
});
</script>
</head>  
<body>
	<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" data-options="closable:true" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>  
	
</body>
</html>

4、Accordion分类
easyui.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script language="javascript">
jQuery(function(){
	$('#mm-tabclose').click(function(){
		var currtab_title = $('#mm').data("currtab");
		$('#tabPanel').tabs('close',currtab_title);
	})
	//全部关闭
	$('#mm-tabcloseall').click(function(){	
		$('.tabs-inner span').each(function(i,n){
			var t = $(n).text();
			if (t != "首页"){
				$('#tabPanel').tabs('close',t);
			}
			
		});	
	});
	//关闭除当前之外的TAB
	$('#mm-tabcloseother').click(function(){
		var currtab_title = $('#mm').data("currtab");
		$('.tabs-inner span').each(function(i,n){
			var t = $(n).text();
			if (t != "首页"){
				if(t!=currtab_title)
					$('#tabPanel').tabs('close',t);
			}
		});	
	});
	//关闭当前右侧的TAB
	$('#mm-tabcloseright').click(function(){
		var nextall = $('.tabs-selected').nextAll();
		if(nextall.length==0){
			//msgShow('系统提示','后边没有啦~~','error');
			alert('后边没有啦~~');
			return false;
		}
		nextall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			if (t != "首页"){
				$('#tabPanel').tabs('close',t);
			}
		});
		return false;
	});
	//关闭当前左侧的TAB
	$('#mm-tabcloseleft').click(function(){
		var prevall = $('.tabs-selected').prevAll();
		if(prevall.length==0){
			alert('到头了，前边没有啦~~');
			return false;
		}
		prevall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			
			if (t != "首页"){
				$('#tabPanel').tabs('close',t);
			}
		});
		return false;
	});

	//退出
	$("#mm-exit").click(function(){
		$('#mm').menu('hide');
	})


	var loadURL = "<%=path%>/menuAction!listTree?date="+new Date()+"";
	$('#tree_div').tree({ 
		method:		"get",
		url:		loadURL,
		lines:		true,
		onClick:	function(treeNode){
			var title =			treeNode.text;
			var isLeaf = 		treeNode.tempLeaf;
			if (isLeaf == 1){
				var menu_href = treeNode.menu_href;
				
				var existFlag =  jQuery("#tabPanel").tabs("exists",title);
				if (existFlag == false){
					jQuery("#tabPanel").tabs("add",{
						title:		title,
						iconCls:	'icon-reload',
						closable:	true,
						selected:	true,
						content:		"<iframe height=\"99%\" width=\"100%\" border=\"0\" frameborder=\"0\" src=\""+menu_href+"\" name=\"roleFrame\" id=\"roleFrame\" title=\"roleFrame\"></iframe>"
					});		
					
					/*双击关闭TAB选项卡*/
					$(".tabs-inner").dblclick(function(){
						var subtitle = $(this).children(".tabs-closable").text();
						$('#tabPanel').tabs('close',subtitle);
					})
					/*为选项卡绑定右键*/
					$(".tabs-inner").bind('contextmenu',function(e){
						$('#mm').menu('show', {
							left: e.pageX,
							top: e.pageY
						});
						
						var subtitle =$(this).children(".tabs-closable").text();
						
						$('#mm').data("currtab",subtitle);
						$('#tabPanel').tabs('select',subtitle);
						return false;
					});							
				}else{
					jQuery("#tabPanel").tabs("select",title);
				}
			}
		}
	});  
});
</script>
</head>  
<body class="easyui-layout" >
	<div data-options="region:'west',collapsible:true,title:'系统菜单'" style="width:200px;height:200px;">
		<div id="aa" class="easyui-accordion"  data-options="fit:true">   
		    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
		        <h3 style="color:#0099FF;">Accordion for jQuery</h3>   
		        <p>Accordion is a part of easyui framework for jQuery.     
		        It lets you define your accordion component on web page more easily.</p>   
		    </div>   
		    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
		        content2    
		    </div>   
		    <div title="Title3">   
		        content3    
		    </div>   
		    <div title="Title4" id="tree_div">   
	
		    </div>   	    
		</div> 	
	
	</div>
	<div id="bb" data-options="region:'center'">
		<div id="tabPanel" class="easyui-tabs" data-options="tabPosition:'top',tabWidth:120,fit:true" >   
		    <div title="首页" style="padding:20px;display:none;">   
		       首页的提醒信息   
		    </div>         
		</div> 
	</div>
	
	<div id=mm class="easyui-menu" style="width: 150px;">
		<div id="mm-tabclose">
			关闭
		</div>
		<div id="mm-tabcloseall">
			全部关闭
		</div>
		<div id="mm-tabcloseother">
			除此之外全部关闭
		</div>
		<div class="menu-sep"></div>
		<div id="mm-tabcloseright">
			当前页右侧全部关闭
		</div>
		<div id="mm-tabcloseleft">
			当前页左侧全部关闭
		</div>
		<div class="menu-sep"></div>
		<div id="mm-exit">
			退出
		</div>
	</div>
</body>
</html>

哈西哈希

关注

0
点赞
踩
0

收藏

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

注意：href只能加载页面的html代码而content可以加载页面的所有代码。1、tree树形组件easyUI.jsp<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.get
复制链接

扫一扫