ZTree相关使用的例子

最新推荐文章于 2022-03-30 15:38:40 发布

linwei_1029

最新推荐文章于 2022-03-30 15:38:40 发布

阅读量1w

点赞数

分类专栏： JQuery|ZTree|JBox

本文链接：https://blog.csdn.net/linwei_1029/article/details/8720887

版权

JQuery|ZTree|JBox 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1. 导入相关ZTree的相关JS，CSS文件：

2. 调用树形弹出框例子：

		<tr>
			<th>组织机构:</th>
			<td class="pn-fcontent"><input type="text" maxlength="20" class=""  readonly="readonly"  id="orgScope" name="orgScope" required="true"/> 
			<input class="btn" type="button" value="选择" οnclick="showPop('addOrgPop');"/> <label>  <font color="red">*</font></label> </td>
			<th>标签:</th>
			<td class="pn-fcontent"><input type="text" maxlength="20" class=""  readonly="readonly"  id="appTag" name="appTag" required="true"/> 
			<input class="btn" type="button" value="选择" οnclick="showPop('addTagPop');"/> <label>  <font color="red">*</font></label> </td>

		</tr>

	var baseUrl = "<@full_path path="/"/>";
	
	//各种弹出框的JS调用方法
	function showPop(type,url) {
		if('addParamsPop' == type) {
        	$.jBox("iframe:<@full_path path="app/addParamsItem"/>", {
		    	title: "新增参数",
		    	width: 600,
		    	height: 300,
		    	buttons: { '关闭': true }
			});
		} else if('updateParamsPop' == type) {
        	$.jBox("iframe:" + url, {
		    	title: "修改参数",
		    	width: 600,
		    	height: 300,
		    	buttons: { '关闭': true }
			});
		} else if('addOrgPop' == type) {
			var url = baseUrl + 'commonorg/getCheckboxTreeOrg?checkedInfo=' + $("#orgScope").val();
        	$.jBox("iframe:" + url, {
		    	title: "组织选择",
		    	width: 600,
		    	height: 300,
		    	buttons: { '关闭': true }
			});
		} else if('addTagPop' == type) {
			var url = baseUrl + 'appTag/getCheckboxTreeTag?checkedInfo=' + $("#appTag").val();
        	$.jBox("iframe:" + url, {
		    	title: "标签选择",
		    	width: 600,
		    	height: 300,
		    	buttons: { '关闭': true }
			});
		} else {
			//type传递空或者为close表示关闭窗口
        	$.jBox.close(true);
		}
	}

3. 调用commonorg/getCheckboxTreeOrg?checkedInfo= 接口代码例子：

package com.ffcs.icity.org.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import net.sf.json.JSONArray;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.ffcs.icity.entity.IcityOrg;
import com.ffcs.icity.org.controller.vo.OrgReqParamVO;
import com.ffcs.icity.org.controller.vo.OrgVO;
import com.ffcs.icity.service.IIcityOrgService;



/**
 * 向系统提供公共的相关组织机构操作界面，以及相关通用组织数据获取接口
 * @author linwei
 * @createtime 2013-3-20     
 *
 */
@RequestMapping("/commonorg")
@Controller
public class CommonOrgController {

	@Autowired
	private IIcityOrgService icityOrgService;
	
	/**
	 * 该方法通过userId以及token的相关校验，返回过滤后的数据页面至前台
	 * 
	 */
	@RequestMapping("/getCheckboxTreeOrg")
	public ModelAndView getCheckboxTreeOrg(HttpServletRequest request,OrgReqParamVO orgReqParamVO) {
		
//		//暂时不进行权限过滤
//		//针对外部传递的用户ID进行权限的过滤操作
//		if(StringUtils.isNotEmpty(orgReqParamVO.getUserId())) {
//			
//		}
				
		Map<String, Object> params = new HashMap<String, Object>();
		List<IcityOrg> list = icityOrgService.search(params);
		List<OrgVO> orgVOList = new ArrayList<OrgVO>();
		Map checkedMap = this.parseCheckedInfo(orgReqParamVO.getCheckedInfo());
		OrgVO orgVO = null;
		for(IcityOrg icityOrg:list){
			orgVO = new OrgVO();
			orgVO.setId(String.valueOf(icityOrg.getId()));
			orgVO.setpId(String.valueOf(icityOrg.getParentId()));
			orgVO.setName(icityOrg.getName());
			orgVO.setCode(icityOrg.getCode());
			//如果长度小于4，说明为全国或者省份，需要自动展示下级节点
			if(icityOrg.getCode().length() < 2) {
				orgVO.setOpen(true);
			} else {
				//表示具体组织节点，无需自动展示下级节点
				orgVO.setOpen(true);
			}
			//如果外部传递的参数中存在需要打钩的选项
			if(checkedMap.containsKey(String.valueOf(icityOrg.getId()))) {
				orgVO.setChecked(true);
			} else {
				orgVO.setChecked(false);
			}
			
			orgVOList.add(orgVO);
		}
		
		String json = JSONArray.fromObject(orgVOList).toString();
		ModelAndView modelAndView=new ModelAndView("/org/common/checkboxTreeOrg");
		modelAndView.addObject("json", json);
		return modelAndView;
	}
	
	
	
	/**
	 * 该方法通过解析外部传递的已勾选信息的字段，返回对应的MAP数据
	 * @param checkedInfo   (格式为id_code_name;id_code_name)
	 * @return
	 * <pre>
	 * 
	 *
	 * </pre>
	 */
	private Map parseCheckedInfo(String checkedInfo) {
		
		Map map = new HashMap();
		if(StringUtils.isNotEmpty(checkedInfo)) {
			String[] orgArr = checkedInfo.split(";");
			String[] tempArr = null;
			for(int i=0;i<orgArr.length;i++) {
				tempArr = orgArr[i].split("_");
				map.put(tempArr[0], tempArr);
			}
		}
		return map;
	}
	
}

4. 展示JSON数据的树形结构页面：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<#include "/views/head.html"/>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="<@full_path path="css/treeAdmRegion.css"/>" type="text/css">
	<link rel="stylesheet" href="<@full_path path="css/zTreeStyle/zTreeStyle.css"/>" type="text/css">
	<script type="text/javascript">
		
		var setting = {
		    check: {
		              enable: true,                           //设置 zTree 的节点上是否显示 checkbox / radio
		              chkStyle:"checkbox",                    //勾选框类型(checkbox 或 radio） 
		              chkboxType: { "Y": "ps", "N": "ps" }    //父子级联关系
		           },
			data: {
				simpleData: {
					enable: true                              //true / false 分别表示 使用 / 不使用 简单数据模式
				}
			}
		};
		
		//树形结构JSON数据
		var datas =${json};

		$(document).ready(function(){
			$.fn.zTree.init($("#ztree"), setting, datas);
			//获得整个树对象
			var treeObjs = $.fn.zTree.getZTreeObj("ztree");
			//获取输入框被勾选(true) 或 未勾选(false)的节点集合。
			var nodes = treeObjs.getCheckedNodes(true);
			initParentNodes(nodes,treeObjs);
			
		});
		
		
		//初始化树形父节点打勾数据
		function initParentNodes(nodes,treeObjs) {
			for(var i=0;i<nodes.length;i++) {
				var parentNode = nodes[i].getParentNode();
				if(parentNode.checked == true) {
					
				} else {
					//如果父节点不为true,则设置成true,同时，继续更新更上一级父节点
					parentNode.checked = true;
					//更新树形节点属性方法
					treeObjs.updateNode(parentNode);
					//迭代循环
					recursiveNode(parentNode.getParentNode(),treeObjs);				
				}
			}			
		}
		
	   //递归相关节点数据	
	   function recursiveNode(node,treeObjs) {
	   		//alert("code is " + node.code + ",name is " + node.name);
	   		if(node != null) {
	   			if(node.checked != true) {
	   				node.checked = true;
	   				treeObjs.updateNode(node);
	   				recursiveNode(node.getParentNode(),treeObjs);
	   			}
	   		}
	   }
		
	   //返回值调用方法	
	   function returnValue() {
	   			
            var zTree = $.fn.zTree.getZTreeObj("ztree");
			//获取输入框被勾选(true) 或 未勾选(false)的节点集合。
            var nodes = zTree.getCheckedNodes(true);
            var res = "";
            for (var i = 0; i < nodes.length; i++) {
	            if(!nodes[i].getCheckStatus().half&&nodes[i].code.length==4)
	                res +=nodes[i].id+"_"+ nodes[i].code+"_"+nodes[i].name+";";
	
	        }          
            //alert(res);
			window.parent.getOrgScope(res);
		    window.parent.showPop();
	  } 
	     
	</script>
</head>

<body>

<div>
	<div> 
		<ul id="ztree" class="ztree"></ul>  
		<ul>                  
	                          
	       	<input type="button" value="确 定" οnclick="returnValue();"></ul>
	</div>
	
	
</div>
</body>
</html>

linwei_1029

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ZTree相关使用的例子

1. 导入相关ZTree的相关JS，CSS文件："/>"/>" type="text/javascript">" type="text/javascript">" type="text/javascript">" type="text/javascript">" type="text/javascript">2. 调用树形弹出框例子：
复制链接

扫一扫