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="选择" ο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>