ztree 更新配置后重新渲染树_【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态...

该博客介绍了如何使用zTree JavaScript库动态加载并根据后台数据生成树形结构,并展示了如何在点击事件中处理节点选中状态。文章通过示例代码详细解释了`searchUnitTree`、`geneUnitTree`、`zTreeOnClick_out`和`beforeCheck_out`等关键函数,实现了树的查询、渲染、点击事件监听和复选框状态管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//查询外部部门结构

var searchUnitTree = function() {

$.ajax({

url : contextPath+ '/exam_getUnitTree.action',

async :true,

dataType :'json',

success :function(response) {

zNodes11=response.unitTrees;//生成树结构

geneUnitTree(zNodes11);

},

error :function() {

alert("查询外部部门树失败!!!")

}

});

}//生成外部部门树

functiongeneUnitTree(unitTrees) {

$("#treeDemo10").html(""); //清空树结构

var setting ={

view : {

selectedMulti :false},

check : {

enable :true},

data : {

simpleData : {

enable :true,

idKey :"unitId",

pIdKey :"upUnitId",

rootPId :null},

key : {

name :"name",

}

},

callback : {

beforeCheck : beforeCheck_out,

onClick : zTreeOnClick_out

}

};var treeNodes11 =unitTrees;

$.fn.zTree.init($("#treeDemo10"), setting, treeNodes11);

}//鼠标点击树事件(打印点击的id与名字)

functionzTreeOnClick_out(event, treeId, treeNode) {//alert(treeNode.unitId + ", " + treeNode.name);

alert($("#el_chooseDepart1").text());

}//点击前面的复选框事件

functionbeforeCheck_out(treeId, treeNode) {

className10= (className10 === "dark" ? "" : "dark");

el_id=treeNode.name;//判断点击的节点是否被选中,返回false 和 true

if (!treeNode.checked) {//选中

showLog10_out(treeNode.name + ',');//加上逗号加以区分

$("#department_employee_out")

.append(//添加部门到下面的选择员工

'

'

+ '

'

+treeNode.name+ '

  '

+ '(人数:0)

'

+ '

');

}else { //点击选中,向让其未选中

noshowLog10_out(treeNode.name + ',', treeNode);

$("#" + treeNode.name).remove();//反选复选框删除部门

var parentzTree =treeNode.getParentNode();

}return (treeNode.doCheck !== false);

}functionshowLog10_out(str) {if (!el_chooseDepart1)

el_chooseDepart1= $("#el_chooseDepart1");

el_chooseDepart1.append("

" + str + "");if (el_chooseDepart1.children("li").length > 6) {

el_chooseDepart1.get(0).removeChild(el_chooseDepart1.children("li")[0]);

}

}functionnoshowLog10_out(str, tNode) {if (!el_chooseDepart1)

el_chooseDepart1= $("#el_chooseDepart1");//删除当前选中的树的名字

el_chooseDepart1.children("#" +el_id).remove();//删除当前子的树的名字

if(tNode.isParent) {var childrenNodes =tNode.children;if(childrenNodes) {for (var i = 0; i < childrenNodes.length; i++) {

alert();var el_id0 =childrenNodes.name;

el_chooseDepart1.children("#" +el_id0).remove();//result += ',' + childrenNodes[i].id;

//result = getChildNodes(childrenNodes[i], result);

}

}

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值