关于zTree的使用心得以及相关的JS技术总结
2015-04-17 18:11
921 查看
首先关于zTree树的生成将它分成了两部分，一部分为公共的JS初始化部分，另一部分为具体的JSP页面，在JSP页面中放入具体的业务参数。
当然要先对zTree的官方API有一定的了解 http://www.ztree.me/v3/api.php
一、介绍JSP页面。
关于引用zTree官方提供的JS文件就不说了。这里我在JSP页面上通过后台传递过来一些特定的参数。
这个页面的 initPersonTree（）会调用写的公共JS执行人员初始化的方法，下面看JS代码
这里的JS主要提供了
1、初始化树的方法，其中分为根节点的初始化和普通节点的加载（因为采用的是异步加载方式），
2、添加人员到候选人处，删除候选人
1）：根节点的初始化，
这里对调用方法返回的参数做了重新包装，将它组装成树节点需要形式的json对象
通过传递指定的组织ID获取该组织的子子组织信息和属于该组织的人员信息（如果有的话）
通过方法返回的参数的格式：
这种数据格式和普通json对象不同的是在外面包了一个方法名和前后的小括号，所以我需要先截取括号内的json字符串，再根据“orgs”和“users”分别获取组织的节点数据和人员的节点数据。
这里要注意json字符串或json数组和json对象的转换：
json字符串或数组转成json对象的方法 JSON.parse（json）、 eval("("+jsons+")") 两种方法; 反过来可以用JSON.stringify（json）转成json字符串；确定该接送属于什么类型可以用alert(typeof(json))。
对于获取到的组织数据和人员数据要有相应的操作，比如组织的数据要添加一个isParent=true的属性保证它是父节点，尤其是异步加载的时候这是要满足的条件之一，还可以添加nocheck=true属性去掉组织 节点前的选择框，如上上图片效果。
其中组织节点和人员节点的数据的具体字段不一样，这里在拼接的时候要确保都有id和那么用来确定节点的ID和节点的名称，
for(var key in treeUNodes){
treeUNodes[key]["id"]=treeUNodes[key]["uid"];
treeUNodes[key]["name"]=treeUNodes[key]["cn"];
}
这个方法就是可以给人员节点数据添加id和那么属性 属性的值从人员节点中获取
2）：其他节点的异步加载的生成树
首先设置好异步加载的参数，可以参考官方API文档。
异步加载传参数和获取数据的处理与根节点初始化是基本一致。
3）：回调函数
这里用到最多的就是单机前和单机时调用的方法；选择框前和选择框时调用的方法；双击前和双击是调用的方法。
单机：单机只要是指点击节点名字，不包括单机选择框
单机前可以设置一些过滤条件决定该节点单机时触不触发，可以参考api文档或者我写好的beforeClick和onCLick方法。
选择框（check）：选择框分radio和checkbox两种
通过选择框时来触发beforeCheck和onCheck方法
双击与单机类似。
4）生成候选人
关于候选人的生成有两点一个是判断该人是否已经选过，还有就是判断是多选还是单选，
添加候选人分别在两个地方，一个是单机节点时还有一个是点击选择框时，也就是分别在onCLick和onCheck方法值执行添加候选人的操作。
//判断这个人有没有选择过
if(!isSelected){
var str = "<li title='"+treeNode.name+"' id = '" +treeId+ treeNode.id + "'><a href='javascript:void(0);' onclick = 'javascript:OsmApp.Tree.removeLi(\""+treeNode.id+"\",\""+treeId+"\");'>" + treeNode.name +
"</a></li>";
returnData.push(treeNode);//将选中的节点（人员）添加到returnData中，returnData是在JS中建立的数组，用来存储节点信息
$("#"+selectTreeId).append(str);//生成HTML
var zTree = $.fn.zTree.getZTreeObj(treeId);
zTree.checkNode(treeNode, true, true);
}
}
如果只能选择一个候选人的话，添加新的人员之前清空returnData数组：
//如果是限选一人的情况
删除候选人：
当然要先对zTree的官方API有一定的了解 http://www.ztree.me/v3/api.php
一、介绍JSP页面。
关于引用zTree官方提供的JS文件就不说了。这里我在JSP页面上通过后台传递过来一些特定的参数。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<%@include file="/WEB-INF/views/commons/common.jsp"%>
<%@include file="/WEB-INF/views/commons/ztree.jsp"%>
<%@include file="/WEB-INF/views/themes/bootstrap_theme.jsp"%>
<script src="${JS_MODULES_PATH}/selectTree.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
function initPersonTree(){
//初始化人员
OsmApp.Tree.selectOsm({
multi : false,
selectType : "checkbox",
data : $("#data").val(),
filter : $("#filter").val(),
base : $("#base").val(),
group : $("#group").val()
});
}
</script>
<body onload = ' initPersonTree();'>
<input type="hidden" id='data' value="${data}"/>
<input type="hidden" id='base' value="${list}"/>
<input type="hidden" id='filter' value="${filter}"/>
<input type="hidden" id='group' value="${group}"/>
<div >
<div class="tabs-header">
<div title="" class="panel-body layout-body" style="padding: 2px 5px 5px; width: 196px; height: 376px;" data-options="region:'center',title:'待办人 | 任意选择'">
<ul id="osmtree" class="ztree" style="display:block;"></ul> //这里是树的生成位置
</div>
<div title="" class="panel-body layout-body" style="padding: 2px 5px 5px; width: 196px; height: 376px;" data-options="region:'center',title:'待办人 | 任意选择'">
<ul id="treeSelected" class="ztree" style="display:block;"></ul> //这里是选择好的候选人的生成位置
</div>
</div>
</body>
</html>这个页面的 initPersonTree（）会调用写的公共JS执行人员初始化的方法，下面看JS代码
(function(window, $){
var OsmApp= {};
var returnData = new Array();
var defalutConfig = {
multi:false,//单选多选
currentPath:BASE_PATH + "/submit/decisionsupport",
personnelPath:"域名"+"/mocha.component.personnel/users",
orgUrl:"0",
selectType:"checkbox"
};
var config = {};
OsmApp.Tree={
selectOsm:function(exdconfig){
config = {};
// $("#treeSelected").empty();
// $("#readTreeSelected").empty();
$.extend(true, config, defalutConfig, exdconfig);//关于这个方法可以自己百度，主要是用来合并，重复的数据以后面的参数为准
initRootNodes("osmtree","treeSelected");
// initRootNodes("osmreadtree","readTreeSelected");
},
removeLi:function(id,treeId){
if(null!=returnData&&returnData.length>0){
var i=0;
for(i=0;i<returnData.length;i++){
if(returnData[i].uid==id){
$("#"+treeId+id).remove();
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var node = treeObj.getNodeByParam("id", id, null);
treeObj.checkNode(node, false, false);
return true;
}
}
}
}
};
var initRootNodes=function(_treeId,_selectTreeId){
$.get(config.currentPath+"/users?id="+config.orgUrl, function(r){
if(r.result){
treeZNodes = r.data;
treeZNodes = treeZNodes.substring(treeZNodes.indexOf("(")+1,treeZNodes.length-1);
treeZNodes = eval("("+treeZNodes+")");
var treeRONodes = treeZNodes["orgs"];
for(var key in treeRONodes){
treeRONodes[key]["isParent"]=true;
treeRONodes[key]["nocheck"]=true;
}
var treeRUNodes = treeZNodes["users"];
for(var key in treeRUNodes){
treeRUNodes[key]["id"]=treeRUNodes[key]["uid"];
treeRUNodes[key]["name"]=treeRUNodes[key]["cn"];
}
treeRONodes = JSON.stringify(treeRONodes);
treeRUNodes = JSON.stringify(treeRUNodes);
treeRONodes = treeRONodes.substring(0,treeRONodes.length-1);
treeRUNodes = treeRUNodes.substring(treeRUNodes.indexOf("[")+1);
if(treeRONodes.length==1||treeRUNodes.length==1){
var treeRNodes = treeRONodes+treeRUNodes;
}else{
var treeRNodes = treeRONodes+","+treeRUNodes;
}
treeRNodes = JSON.parse(treeRNodes);
initTree(_treeId,_selectTreeId,treeRNodes);
}else{
alert(r.message);
}
}, "json");
};
var defaultSetting={
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false,
showIcon: true
},
data: {
simpleData: {
enable: true
}
}
};
//初始树--包含待办和待阅
var initTree=function(_treeId,_selectTreeId,_treeZNodes,otherParam){
var settings = {};
var userSetting={
check: {
enable: true,
autoCheckTrigger: true,
chkboxType: { "Y": "s", "N": "ps" },
chkStyle : config.selectType
},
async: {
enable: true,
url: config.currentPath + "/users",
autoParam: ["id=id"],
type : "get",
dataFilter:function(treeId, parentNode, responseData){
if(responseData.result){
var treeNodes = responseData.data;
treeNodes = treeNodes.substring(treeNodes.indexOf("(")+1,treeNodes.length-1);
treeNodes = eval("("+treeNodes+")");//json字符串转成json对象
var treeONodes = treeNodes["orgs"];
for(var key in treeONodes){
treeONodes[key]["isParent"]=true;
treeONodes[key]["nocheck"]=true;
}
var treeUNodes = treeNodes["users"];
for(var key in treeUNodes){
treeUNodes[key]["id"]=treeUNodes[key]["uid"];
treeUNodes[key]["name"]=treeUNodes[key]["cn"];
}
treeONodes = JSON.stringify(treeONodes);
treeUNodes = JSON.stringify(treeUNodes);
treeONodes = treeONodes.substring(0,treeONodes.length-1);
treeUNodes = treeUNodes.substring(treeUNodes.indexOf("[")+1);
if(treeONodes.length==1||treeUNodes.length==1){
var treeNodes = treeONodes+treeUNodes;
}else{
var treeNodes = treeONodes+","+treeUNodes;
}
treeNodes = JSON.parse(treeNodes);
return ;
}else{
alert(responseData.message);
}
},
},
callback:{
onClick : function(event, treeId, treeNode){
var zTree = $.fn.zTree.getZTreeObj(_treeId);
if(treeNode.isParent){
zTree.expandNode(treeNode);
return;
}
//如果是限选一人的情况
if(!config.multi){
returnData = new Array();
$("#"+_selectTreeId).empty();
}
//判断这个人有没有选择过
addLi(treeNode,treeId,_selectTreeId);
},
onCheck:zTreeOnCheck,
beforeCheck: zTreeBeforeCheck,
}
};
$.extend(true, settings, defaultSetting, userSetting);
$.fn.zTree.destroy(_treeId);
b45d
$.fn.zTree.init($("#"+_treeId), settings, _treeZNodes);
};
/**
* 复选框选择事件
*/
function zTreeOnCheck(event, treeId, treeNode) {
//判断是否为组织
if(!treeNode.isParent){
//获取选择UL id
var selectTreeId = (treeId=="osmtree"?"treeSelected":"readTreeSelected");
if(!config.multi){
returnData = new Array();
$("#"+selectTreeId).empty();
}
//如果是选中，进行添加
if(treeNode.checked){
addLi(treeNode,treeId,selectTreeId);
}else{//如果是取消，则进行删除
OsmApp.Tree.removeLi(treeNode.id, treeId);
}
}
};
/**
* 复选框选择之前的方法---展开组织
*/
function zTreeBeforeCheck(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
if(treeNode.isParent){
zTree.expandNode(treeNode,true);//展开子节点
}
var nodes = zTree.getCheckedNodes(true);
if(config.selectType=="radio"){
for (var i=0, l=nodes.length; i < l; i++) {
zTree.checkNode(nodes[i], false, true);
}
}
};
/**
* 添加信息
*/
function addLi(treeNode,treeId,selectTreeId){
var isSelected = false;
$("#"+selectTreeId).find("li").each(function(index,domEle){
var eId = $(domEle).attr("id");
if(eId == treeId+treeNode.id){
isSelected = true;
}
});
//判断这个人有没有选择过
if(!isSelected){
var str = "<li title='"+treeNode.name+"' id = '" +treeId+ treeNode.id + "'><a href='javascript:void(0);' onclick = 'javascript:OsmApp.Tree.removeLi(\""+treeNode.id+"\",\""+treeId+"\");'>" + treeNode.name + "</a></li>";
returnData.push(treeNode);
$("#"+selectTreeId).append(str);
var zTree = $.fn.zTree.getZTreeObj(treeId);
zTree.checkNode(treeNode, true, true);
}
}
function getRoots(treeObj) {
//返回根节点集合
return treeObj.getNodesByFilter(function (node) { return node.level == 0; });
}
window.OsmApp = OsmApp;
})(window, jQuery);这里的JS主要提供了
1、初始化树的方法，其中分为根节点的初始化和普通节点的加载（因为采用的是异步加载方式），
2、添加人员到候选人处，删除候选人
1）：根节点的初始化，
这里对调用方法返回的参数做了重新包装，将它组装成树节点需要形式的json对象
通过传递指定的组织ID获取该组织的子子组织信息和属于该组织的人员信息（如果有的话）
通过方法返回的参数的格式：
这种数据格式和普通json对象不同的是在外面包了一个方法名和前后的小括号，所以我需要先截取括号内的json字符串，再根据“orgs”和“users”分别获取组织的节点数据和人员的节点数据。
这里要注意json字符串或json数组和json对象的转换：
json字符串或数组转成json对象的方法 JSON.parse（json）、 eval("("+jsons+")") 两种方法; 反过来可以用JSON.stringify（json）转成json字符串；确定该接送属于什么类型可以用alert(typeof(json))。
对于获取到的组织数据和人员数据要有相应的操作，比如组织的数据要添加一个isParent=true的属性保证它是父节点，尤其是异步加载的时候这是要满足的条件之一，还可以添加nocheck=true属性去掉组织 节点前的选择框，如上上图片效果。
其中组织节点和人员节点的数据的具体字段不一样，这里在拼接的时候要确保都有id和那么用来确定节点的ID和节点的名称，
for(var key in treeUNodes){
treeUNodes[key]["id"]=treeUNodes[key]["uid"];
treeUNodes[key]["name"]=treeUNodes[key]["cn"];
}
这个方法就是可以给人员节点数据添加id和那么属性 属性的值从人员节点中获取
2）：其他节点的异步加载的生成树
首先设置好异步加载的参数，可以参考官方API文档。
异步加载传参数和获取数据的处理与根节点初始化是基本一致。
3）：回调函数
这里用到最多的就是单机前和单机时调用的方法；选择框前和选择框时调用的方法；双击前和双击是调用的方法。
单机：单机只要是指点击节点名字，不包括单机选择框
单机前可以设置一些过滤条件决定该节点单机时触不触发，可以参考api文档或者我写好的beforeClick和onCLick方法。
选择框（check）：选择框分radio和checkbox两种
通过选择框时来触发beforeCheck和onCheck方法
双击与单机类似。
4）生成候选人
关于候选人的生成有两点一个是判断该人是否已经选过，还有就是判断是多选还是单选，
添加候选人分别在两个地方，一个是单机节点时还有一个是点击选择框时，也就是分别在onCLick和onCheck方法值执行添加候选人的操作。
function addLi(treeNode,treeId,selectTreeId){
var isSelected = false;
$("#"+selectTreeId).find("li").each(function(index,domEle){
var eId = $(domEle).attr("id");
if(eId == treeId+treeNode.id){
isSelected = true;
}
});//判断这个人有没有选择过
if(!isSelected){
var str = "<li title='"+treeNode.name+"' id = '" +treeId+ treeNode.id + "'><a href='javascript:void(0);' onclick = 'javascript:OsmApp.Tree.removeLi(\""+treeNode.id+"\",\""+treeId+"\");'>" + treeNode.name +
"</a></li>";
returnData.push(treeNode);//将选中的节点（人员）添加到returnData中，returnData是在JS中建立的数组，用来存储节点信息
$("#"+selectTreeId).append(str);//生成HTML
var zTree = $.fn.zTree.getZTreeObj(treeId);
zTree.checkNode(treeNode, true, true);
}
}
如果只能选择一个候选人的话，添加新的人员之前清空returnData数组：
//如果是限选一人的情况
if(!config.multi){
returnData = new Array();
$("#"+_selectTreeId).empty();//_selectTreeId这个就是生成候选人的DIV的ID
}删除候选人：
removeLi:function(id,treeId){
if(null!=returnData&&returnData.length>0){
var i=0;
for(i=0;i<returnData.length;i++){
if(returnData[i].uid==id){
$("#"+treeId+id).remove();//删除候选人的HTML
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var node = treeObj.getNodeByParam("id", id, null);
treeObj.checkNode(node, false, false);//设置被选择的人员的是否被选中属性
return true;
}
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 技术总结:关于JS执行前台和后台顺序的.另外一个是前后和后台变量的交互的.
- 总结一下最近关于domain object以及相关的讨论
- JS拖动技术 关于setCapture使用
- 01.关于使用Hibernate技术实现分页显示的思考总结
- 关于CKEditor与CKFinder配合使用以及一些注意点总结
- JMJS系统总结系列----JMJS中接口使用的技术（六）
- 关于视频相关的播放、转换技术总结
- Uploadify使用心得以及相关问题搜集
- 关于IAR的使用心得总结贴
- 关于js中单引号(')和双引号(")的使用以及转义的理解
- Storm使用到的相关技术总结
- 总结一下js数组以及jquery相关操作
- 关于JAVA连接ORACLE以及使用的相关知识
- 关于MFC中CDHtmlDialog嵌入flash和调用JS一些技术总结
- Storm使用到的相关技术总结
- Storm使用到的相关技术总结
- 关于Solr在Node.js中的使用以及Core的创建
- fckeditor2.6使用心得以及相关异常
- 关于PHP模板Smarty的初级使用方法以及心得分享
- 关于PHP模板Smarty的初级使用方法以及心得分享