ztree总结

<form id="mform" action="" method="post" target="orgFrame">
<input id="orgCode" name="orgCode" type="hidden" value=""/>
<div class="" align="center" style=" 100%;margin-left: 0px">
<table style=" 900px; margin-top: 20px;">
<tr>
<td align="left">
<input type="button" class="btn-bg" id="addNode" value="添 加">
<input type="button" class="btn-bg" id="editNode" value="编 辑">
<input type="button" class="btn-bg" id="mvNode" value="删 除">
</td>
</tr>
</table>
<table>
<tr>
<td>
<div style='height:580px;250px;border:#C6BEB2 1px solid;margin-top:10px;overflow-y:scroll;'>
<ul id='orgTree' class='ztree' style='display: block;'></ul>
</div>
</td>
<td>
<div style='height:580px;650px;border:#C6BEB2 1px solid;margin-top:10px;overflow: visible;'>
<iframe name="orgFrame" id="orgFrame" width="100%" style="height:99%" frameborder="0" scrolling="no" ></iframe>
</div>
</td>
</tr>
</table>
</div>
</form>

<script type="text/javascript">
//初始化树
$(document).ready(function(){
initZTree();
});

var initZTree = function() {
var obj1 = ${orgOJsonbject }; //后台返回的json格式的数据，

//isParent是否是父节点o是节点的id 默认名称为id 但是也可以在配置里面修改为返回数据的主键id、displayName为节点的现实名称，也是设置的 :设置下面有介绍

var treeNodes = {isParent:true, o:obj1.id, displayName:obj1.orgName,orgCode:obj1.orgCode};

$.fn.zTree.init($("#orgTree"), setting1, treeNodes); //id = orgTree的容器里面展现改树结构

var zTree=$.fn.zTree.getZTreeObj("orgTree");//获取改树对象
var node=zTree.getNodeByParam("o",obj1.id,null);//根据属性查找节点，
zTree.expandNode(node,true,true,true);//展开改node节点（因为进入页面开始只查询了父节点，其他节点需要通过展开时候自动的异步加载来现实数据，但是,我想要现实两层数据，又不想改后台代码，所以就在初始化树之后，在展开父节点，就显示第二层的数据了，也可以强制异步加载：下面有介绍）

};

var setting1 = {//设置模块，可以设置你想显示什么样子的树
check: {
enable: true,//表示启用选框，
autoCheckTrigger: true,
chkboxType: { "Y": "", "N": "" },
radioType : "all",//全树都只能选一个
chkStyle : "radio"//显示单选还是复选checkbox或者radio
},
async: {//异步加载
enable: true,//表示启用异步加载
url: FRAMEWORK_BASE_PATH + "/organization/sub_organization_query",//访问路径
autoParam: ["o=parentId"],//传递的参数o是代表你想传递的树的属性，这里o是id，parentId表示后台接收的时候显示的属性名称，比如方法a（String parentId）这个parentId就是前台传递的o的值
dataType: "text",
type : "get",
dataFilter:function(treeId, parentNode, treeONodes){//treeONodes后台返回的json格式的数据
for(var key = 0;key<treeONodes.length;key++){//对数据进行处理
treeONodes[key]["isParent"]=true;
treeONodes[key]["o"]=treeONodes[key]["id"];
treeONodes[key]["displayName"]=treeONodes[key]["orgName"];
}
return treeONodes;
},
},
data: {
key: {
name: "displayName"
},
simpleData: {
enable: true,
idKey: "o",//将id改成o
pIdKey: "parentOrgId",//父id改为parentOrgId
rootPId: null//根节点的父id显示null
}
},
callback: {//回调函数的设置
onClick:zTreeOnClick,//点击的时候触发
onCheck: zTreeOnCheck//点击选框的时候触发
}
};

function zTreeOnClick(event, treeId, treeNode){
treeNode.checked = true;//自己写的现实节点的时候默认选中选框
var treeObj = $.fn.zTree.getZTreeObj("orgTree");
treeObj.updateNode(treeNode); //当修改节点属性值的时候一定要手动updateNode不能树不会显示更新
removeClass();
addClass(treeNode);
$('#mform').attr("action","${FRAMEWORK_BASE_PATH}/organization/organization_view?edit=false");//点击在右边显示改节点的详情
$('#orgCode').val(treeNode.orgCode);
$('#mform').submit();
}

function zTreeOnCheck(event, treeId, treeNode){
zTreeOnClick(event, treeId, treeNode);//自己写的点击选框默认选中该节点
removeClass();
addClass(treeNode);
}

function removeClass(){
$(".curSelectedNode").each(function(){
var nid = "#"+this.id;
$(nid).removeClass("curSelectedNode");
});
}

function addClass(treeNode){
var nodeid = "#"+treeNode.tId+"_a";
$(nodeid).addClass("curSelectedNode");
}

function updateEditNode(orgCode,displayName,kind){//但你执行完增删改的时候 更新树的操作
var treeObj = $.fn.zTree.getZTreeObj("orgTree");
var node=treeObj.getNodeByParam("orgCode",orgCode,null);
if(kind==1){//新增节点跟新 参数displayName为新增节点的orgCode
var type = "refresh";
var silent = false;
/*强行异步加载父节点的子节点。[setting.async.enable = true 时有效]*/
treeObj.reAsyncChildNodes(node, type, silent);
}else if(kind==2){//删除更新
treeObj.removeNode(node);
}else if(kind==3){//上移更新
//传过来的是parentId
node=treeObj.getNodeByParam("o",orgCode,null);
var type = "refresh";
var silent = false;
/*强行异步加载父节点的子节点。[setting.async.enable = true 时有效]*/
treeObj.reAsyncChildNodes(node, type, silent);
}else if(kind==4){//修改名称更新
node.displayName = displayName;
treeObj.updateNode(node);
}
}
//添加按钮添加事件
$('#addNode').bind('click', function() {
$('#mform').attr("action","${FRAMEWORK_BASE_PATH}/organization/organization_add");
var treeObj = $.fn.zTree.getZTreeObj("orgTree");
var nodes = treeObj.getCheckedNodes(true);
if(nodes.length > 1 || nodes.length == 0){
alert("请选择一个节点！");
} else {
var orgCode = "";
var node = "";
for (var i=0, l = nodes.length; i < l; i++) {
if((nodes[i].displayName != "省公司")&&(nodes[i].levelEntity.levelNo == "OL-10000-03" || nodes[i].levelEntity.levelNo == "OL-10001-03")){
alert("该组织已为最底层组织，无下一层组织！");
return;
}
orgCode = nodes[i].orgCode;
}
$('#orgCode').val(orgCode);
$('#mform').submit();
}
});

//编辑按钮添加事件
$('#editNode').bind('click', function() {
$('#mform').attr("action","${FRAMEWORK_BASE_PATH}/organization/organization_view?edit=true");
var treeObj = $.fn.zTree.getZTreeObj("orgTree");
var nodes = treeObj.getCheckedNodes(true);
if(nodes.length > 1 || nodes.length == 0){
alert("请选择一个节点！");
} else {
var o = "";
for (var i=0, l = nodes.length; i < l; i++) {
o = nodes[i].orgCode;
}
$('#orgCode').val(o);
$('#mform').submit();
}
});

//删除按钮添加事件
$('#mvNode').bind('click', function() {
var treeObj = $.fn.zTree.getZTreeObj("orgTree");
var nodes = treeObj.getCheckedNodes(true);
if(nodes.length > 1 || nodes.length == 0){
alert("请选择一个节点！");
} else {
var orgCode = "";
var id = ""
var deptName = "";
var node = "";
for (var i=0, l=nodes.length; i < l; i++) {
node = nodes[i];
orgCode = nodes[i].orgCode;
id = nodes[i].o;
}
if(confirm("确认删除组织？")){
$.ajax({
url: FRAMEWORK_BASE_PATH + "/organization/organization_remove",
async : false,
type : "POST",
data : {"id" : id,"orgCode" : orgCode},
dataType : "json",
success : function(r) {
if(r.result){
alert("删除成功！");
//initZTree();
//删除选中的节点
updateEditNode(orgCode,"",2);
$("#orgFrame").empty();
} else {
var message = r.message;
if(message.indexOf("实例") >= 0){
message = message.substring(0,message.indexOf("实例")+3)+"请先删除该实例";
}
alert(message);
}
}
});
}
}
});
</script>