ZTree相关使用的例子

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

<link rel="stylesheet" type="text/css" href="<@full_path path="css/zTreeStyle/zTreeStyle.css"/>"/>

<link rel="stylesheet" type="text/css" href="<@full_path path="js/jBox/Skins/Default/jbox.css"/>"/>

<script src="<@full_path path="js/jquery.js"/>" type="text/javascript"></script>
<script src="<@full_path path="js/jquery.ztree.core-3.4.min.js"/>" type="text/javascript"></script>
<script src="<@full_path path="js/jquery.ztree.excheck-3.5.js"/>" type="text/javascript"></script>

<script src="<@full_path path="js/jBox/jquery.jBox-2.3.min.js"/>" type="text/javascript"></script>
<script src="<@full_path path="js/jBox/i18n/jquery.jBox-zh-CN.js"/>" type="text/javascript"></script>

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="选择" onclick="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="选择" onclick="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")@Controllerpublic class CommonOrgController {@Autowiredprivate 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="确 定" onclick="returnValue();"></ul></div></div></body></html>