ztree总结-白红宇

ztree总结

阅读量：5224 次

发布时间：2019-06-14

本文共 6176 字，大约阅读时间需要 20 分钟。

<tr>

</td>

</tr>

</table>

<table>

<tr>

<td>

</div>

</td>

<td>

</div>

</td>

</tr>

</table>

</div>

</form>

//初始化树

$(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>

转载于:https://www.cnblogs.com/husfsh-16300/p/6702953.html

你可能感兴趣的文章

((完美有效))安卓神器XPOSED框架不用root安装指南

查看>>

Java删除properties配置文件中指定键值的代码

查看>>

python使用chardet判断字符串编码，超简单的代码

[NOIP2012TG] 洛谷 P1080 国王游戏

洛谷P4315 月下“毛景树” 边权树剖+双标记

查看>>

P2234 [HNOI2002]营业额统计

查看>>

UVA11374 Airport Express

查看>>

P1373 小a和uim之大逃离四维dp，维护差值

查看>>