操作树搭建教程-优快云博客

本文链接：https://blog.youkuaiyun.com/jeo_chow/article/details/52331775

要实现操作树，要引入dtree插件

把dtree文件夹拷贝到Web-Root下即可

其他都是按部就班，都已经封装好了的，只要照猫画虎就行了

首先，要先写一个有框架集（frameset）的页面，分左右两边，左边放树，右边随便了，我们现在是演示怎么生成树的

框架集可以不用body

<%@ 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>
	<title>OA办公管理系统-操作模块管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<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 href="${path }/logo.ico" rel="shortcut icon" type="image/x-icon" />
	<link href="${path}/css/common/admin.css" type="text/css" rel="stylesheet"/>
	<link href="${path}/css/common/pager.css" type="text/css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="${path}/js/jqeasyui/themes/default/easyui.css">
	<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript" src="${path}/js/jqeasyui/jquery.easyui.min.js"></script>
	
		
</head>
	<!-- 框架集：分成两列，不要body标签 cols：168，左边窗口占168宽，右边全占满 -->
	<frameset cols="168,*" frameborder="yes" border="1" >
		<!-- 左子窗口显示树 -->
		<frame src="${path }/admin/identity/moduleLeft.jspx" name="moduleLeftFrame" />
		<!-- 右子窗口显示列表 -->
		<frame src="${path }/admin/identity/selectModule.jspx" name="moduleRightFrame" />
	</frameset>





</html>

如果点击了框架集，系统通过框架集然后会自动加载到有操作树的窗口

现在写左子窗口生成树的页面

要在页面中引入dtree文件路径，才能生成树

<%@ 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>
	<title>OA办公管理系统-操作模块管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<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 href="${path }/logo.ico" rel="shortcut icon" type="image/x-icon" />
	<link href="${path}/css/common/admin.css" type="text/css" rel="stylesheet"/>
	<link href="${path}/css/common/pager.css" type="text/css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="${path}/js/jqeasyui/themes/default/easyui.css">
	<span style="background-color: rgb(255, 0, 0);"><link rel="stylesheet" type="text/css" href="${path}/js/dtree/dtree.css"/>
	<script type="text/javascript" src="${path}/js/dtree/dtree.js"></script></span>
	<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript" src="${path}/js/jqeasyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function() {
			/** 创建树对象,成为全局变量，用window点   局部变量是var 定义的*/
			window.d = new dTree("d","${path}/js/dtree/");
			/** 添加根节点
				id : 自己节点的id
				pid: 父节点的id
				name：树节点显示的名称
				d.add(id, pid, name, url, title, target, icon, iconOpen, open)
			*/ 
			
			d.add(-2,-1, "模块管理");
			d.add(0,-2,"全部","${path}/admin/identity/selectModule.jspx","全部","moduleRightFrame")
			/** 发异步请求加载操作树 ，一般要记得页面随时用到异步加载请求*/
			$.ajax({
				url:"${path}/admin/identity/loadModuleTreeAjax.jspx",
				type:"post",
				dataType:"json",
				async:true,
				success:function(data){//这个data是个变量，随便取什么名，就是从后台返回回来的数据，来接收
					<span style="background-color: rgb(255, 153, 102);">//先在页面分析好，前台是通过什么形式拿到后台的数据，有了这样的思路就好操作后台
					//引用的是第三方的树形结构图，会自动封装数据加载成树形结构图
					//data要接收的数据是:d.add(id, pid, name,)
					//后台的数据应该是：[{id:"",pid:"",name:""},{},...] List<Map<String,Object>>
					$.each(data,function(){
						//this指:{id:'',pid:'',name:''}
						/**
			 			 d.add(id, pid, name, url, title, target)
			 			 target: 目标写frame的name属性值
			 			 */
						d.add(this.id,this.pid,this.name,</span>

<span style="background-color: rgb(255, 153, 102);"><span style="white-space:pre">			</span>"${path}/admin/identity/selectModule.jspx?parentCode="+this.id,this.name,"moduleRightFrame");
					});</span>
					$(document.body).html(d.toString());
				},
				error:function(){
					alert("数据加载失败！");
				}
			});
		});
		
		

	</script>
		
</head>
	<body>

	</body>





</html>

中间橘黄色部分具体的异步请求就不演示了，比较繁琐。

演示一个配置异步请求的xml文件，要注意：有用到json格式，xml要继承json

<!-- 异步加载左子窗口 -->
    	<action name="loadModuleTreeAjax" class="cn.oa.admin.identity.action.IdentityAjax" method="loadModuleTreeAjax">
    		<result type="json">
    			<!-- JSONResult类中setRoot方法来指定 调用当前Action的哪个get方法返回响应数据
        			getResponseData(),还有一种方法就是对于要拿多个数据时，用注解@JSON即可直接可以拿数据
        			如果只有拿一个对象就用配置好一些，像下面这个就是
        		 -->
    			<param name="root">responseData</param>
    			<!-- 配置对响应数据进行GZIP压缩，提升服务器响应速度，只要是json格式就配置 -->
    			<param name="enableGZIP">true</param>
    		</result>
    	</action>

怎么实现操作树