easyui

最新推荐文章于 2020-04-01 17:52:33 发布

艾xc

最新推荐文章于 2020-04-01 17:52:33 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/Hasekll/article/details/94186771

版权

案例：
1、通过layout布局
2、通过tree加载菜单
3、通过菜单去打开不同的tab页

1、通过layout布局

<!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}/static/js/easyui5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/js/easyui5/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/easyui5/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/easyui5/jquery.easyui.min.js"></script>

<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/index.js">
</script>

<title>Insert title here</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="tt"></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="menuTabs" class="easyui-tabs" style="">   
    <div title="Tab1" style="padding:20px;display:none;">欢迎使用</div>  
</div>  
		
	</div>
</body>
</html>

如下：
观察tree_data1.json这个类可以看出我们需要何种样式

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

然后去建一个实体类：

public class aixincheng {
	private String id;
	private String text;
	private Map<String, Object> attributes = new HashMap<>();
	private List<TreeNode> children = new ArrayList<>();

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<TreeNode> getChildren() {
		return children;
	}

	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}

	public TreeNode(String id, String text, Map<String, Object> attributes, List<TreeNode> children) {
		super();
		this.id = id;
		this.text = text;
		this.attributes = attributes;
		this.children = children;
	}

	public TreeNode() {
		super();
	}

	@Override
	public String toString() {
		return "TreeNode [id=" + id + ", text=" + text + ", attributes=" + attributes + ", children=" + children + "]";
	}
}

然后去建一个类来完成格式转换

public class aixinchengextends JsonBaseDao{

	public List<TreeNode> list(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		List<Map<String,Object>> listMenu = this.listMenu(map, pageBean);
		List<TreeNode> treeNodeList = new ArrayList<>();
		listMenu2(listMenu, treeNodeList);
		return treeNodeList;
	}
	
	
	public List<Map<String, Object>> listMenu(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_menu where 1=1";
		String id = JsonUtils.getParamVal(map, "id");
		if(StringUtils.isNotBlank(id))
			sql += " and parentid ="+id;
		else
			sql += " and parentid = -1";
		return super.executeQuery(sql, pageBean);
	}
	
	private void listMenu1(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);需要转格式（easyui能识别的格式）
		Map<String, String[]> jspMap = new HashMap<>();
		jspMap.put("id", new String[] {treeNode.getId()});
		List<Map<String,Object>> listMenu = this.listMenu(jspMap, null);
		List<TreeNode> treeNodeList = new ArrayList<>();
		
		listMenu2(listMenu, treeNodeList);
		
		treeNode.setChildren(treeNodeList);
		
		
		
	}
	
	
	private void listMenu2(List<Map<String, Object>> mapList,List<TreeNode> treeNodelist) throws InstantiationException, IllegalAccessException, SQLException{
		TreeNode treeNode = null;
		for (Map<String, Object> map : mapList) {
			treeNode = new TreeNode();
			listMenu1(map, treeNode);
			treeNodelist.add(treeNode);
		}
		
		
		
	}

}

再去建一个子控制器

public class aixinchengextends ActionSupport{

	private MenuDao menuDao = new MenuDao();
	
	public String treeMenu(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List<TreeNode> list = this.menuDao.list(req.getParameterMap(), null);
			ObjectMapper om = new ObjectMapper();
			String aa = om.writeValueAsString(list);
			ResponseUtil.write(resp, aa);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
		
	}
	
}

然后配置

<config>	
	<action path="/menuAction" type="com.yj.web.MenuAction">
		<forward name="index" path="/index.jsp" redirect="false" />
	</action>
</config>

再配置插件里的路径

$(function() {
	$('#tt').tree({
		url : 'menuAction.action?methodName=treeMenu',
		onClick : function(node) {
			var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
			if($('#menuTabs').tabs('exists',node.text)){
				$('#menuTabs').tabs('select',node.text)
			}
			else{
				$('#menuTabs').tabs('add',{
					title : node.text,
					content : content,
					closable : true,
					tools : [ {
						iconCls : 'icon-mini-refresh',
						handler : function() {
							alert('refresh');
						}
					} ]
	
				});
			}
		}
	});

})