zTree checkbox 异步加载

最新推荐文章于 2022-03-06 22:27:09 发布

this_ITBoy

最新推荐文章于 2022-03-06 22:27:09 发布

阅读量1k

点赞数

分类专栏：转载文章标签：异步 ztree checkbox

转载专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了一个使用JSP实现的组织机构多选页面案例，该页面利用zTree插件展示组织结构，并通过异步加载方式获取组织数据。文章详细展示了页面布局、样式设置、JavaScript交互逻辑及后台数据处理过程。

摘要由CSDN通过智能技术生成

jsp部分：

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>${applicationName}</title>
	<link rel="stylesheet" type="text/css" href="${ctx}/css/${skinId}/style.css" />
	<link rel="stylesheet" href="${ctx}/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="${ctx}/js/jquery/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/zTree_v3/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="${ctx}/js/zTree_v3/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="${ctx}/js/comm/GeneralPageOperation.js"></script>
	<!--
	  -- 创建人：liyafei
	  -- 创建时间：2014-06-25
	  -- 备注：新建
	  -- @version 1.0
	  -- 说明：	此页面是组织多选页面，
	  			父页面必须有 id="orgIds",id="orgNames" 的两个标签,
	  			分别是选择后的id值，name值，值中间用","隔开
	  			
	-->
	<script type="text/javascript">
		<!--
		var setting = {
			async: {
				enable: true,
				url:"org-tree!ajaxOrgTreeCheck.action",	//异步请求地址
				autoParam:["id", "name=n", "level=lv"],
				dataFilter: filter
			},
			check: {
				enable: true,
				chkStyle: "checkbox",				//多选
				chkboxType: { "Y" : "", "N" : "" }	//不级联父节点选择
			}
		};

		function filter(treeId, parentNode, childNodes) {
			if (!childNodes) return null;
			for (var i=0, l=childNodes.length; i<l; i++) {
				childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
			}
			return childNodes;
		}
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting);
		});
		
		//保存选中的组织
		 function saveOrg() {
         	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
         	//获得选中所有节点，返回值 Array(JSON)
			var nodes = treeObj.getCheckedNodes(true);
            var str_id = ""; 
            var str_name = ""; 
            //遍历选中的节点  Array(JSON)
			for (var node in nodes){ 
				for(var key in nodes[node]){ 
					//只取JSON中的 id,name的值
					if("id" == key){
						if(str_id!=""){
						 	str_id = str_id + ',' + nodes[node][key]; 
						}else{
							str_id += nodes[node][key]; 
						}
					}
					if("name" == key){
						if(str_name!=""){
						 	str_name = str_name + ',' + nodes[node][key]; 
						}else{
							str_name += nodes[node][key]; 
						}
					}
				} 
			} 
			//把选择的值 赋值给父页面，父页面必须有 id="orgIds",id="orgNames" 的两个标签接收
             window.parent.document.getElementById("orgIds").value = str_id;
             window.parent.document.getElementById("orgNames").value = str_name;
            sonCloseWindow(1);	//关闭弹出的本页面
          }
		//-->
	</script>

</head>

<body>
<form action="">
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	
</div>
	<table width="100%" class="UTry-FormStyle">
          <tr>
            <td class="TextTd" colspan="3" align="center">
            <br />
              <input type="button" value="确定" class="buttonGM" οnclick="saveOrg();" />
              <input type="button" value="关闭" class="buttonGM" οnclick="sonCloseWindow(1);return false;" />
            </td>
          </tr>
        </table>
      </form>
</body>
</html>

action部分：

/**
	 * 
	* 方法名: ajaxOrgTreeCheck
	* 方法描述: (组织多选)
	* 创建人：liyafei 
	* 修改时间：2014-6-25 上午11:32:36 
	* 参数 @throws IOException 参数说明
	* 返回类型 void 返回类型
	* @throws
	 */
	public void ajaxOrgTreeCheck() throws IOException{  
		//第一次加载根节点
		if (StringUtil.isBlank(this.id)) {
			UserModel user = (UserModel) Struts2Utils.getSession().getAttribute(Constants.USER_SESSION_ID);
			//根节点对象： 获得当前登录用户拥有权限的最高级组织
			rootOrg = orgService.maxViewOrg(user);
			Struts2Utils.getSession().setAttribute(Constants.GROUP_SESSION_ID, rootOrg.getId());
			
			JSONObject json=new JSONObject();
		    json.put("id",rootOrg.getId());			//根节点id
		    json.put("name", rootOrg.getName());	//根节点名称
		    json.put("pid", rootOrg.getP_id());		//父节点id
		    //查询是否有子节点
		    List<OrgModel> listChlil = orgService.getChildrenByPIdAndMaxId(rootOrg.getId(), Struts2Utils.getSession().getAttribute(Constants.GROUP_SESSION_ID).toString());
		    if(!listChlil.isEmpty()){
		    	json.put("isParent", true);
		    	json.put("icon", "/js/jstree/themes/default/depar1.png");
		    }else{
		    	json.put("icon", "/js/jstree/themes/default/depar2.png");
		    }
			this.ajaxHttpResponseWriter(json);
		//加载子节点
		}else{
			//查询子节点
			List<OrgModel> list = orgService.getChildrenByPIdAndMaxId(id, Struts2Utils.getSession().getAttribute(Constants.GROUP_SESSION_ID).toString());
			
			JSONArray jsonArr = new JSONArray();
			  
			for(OrgModel org :list){
			    JSONObject json=new JSONObject();
			    json.put("id",org.getId());			//节点id
			    json.put("name", org.getName());	//节点名称
			    json.put("pid", org.getP_id());		//父节点id
			    //查询是否有子节点
			    List<OrgModel> listChlil = orgService.getChildrenByPIdAndMaxId(org.getId(), Struts2Utils.getSession().getAttribute(Constants.GROUP_SESSION_ID).toString());
			    if(!listChlil.isEmpty()){
			    	json.put("isParent", true);			//是否有子节点
			    	json.put("icon", "/js/jstree/themes/default/depar1.png");
			    }else{
			    	json.put("icon", "/js/jstree/themes/default/depar2.png");
			    	
			    }
			    jsonArr.put(json);
			}
			this.ajaxHttpResponseWriter(JSONArray.fromObject(jsonArr));
		}
	}