Angular7中zTree的用法和踩过的坑(全选反选)

时间：2019-07-04 12:22:16 阅读：190 评论：0 收藏：0 [点我收藏+]

一：项目需要加一个树形的下拉框

效果图: 技术分享图片

于是开始动手写,按照ztree官方API一步步配置，最后发现没有复选框，经过百度发现是没有引入js

1.npm i ztree -S

2.在angular.json中加入"node_modules/ztree/js/jquery.ztree.all.js",一行就行

3.在HTML页面中引入ztree <ul id="ztree" class="ztree"></ul>

4.在要使用ztree的ts页面引入ztree import ‘ztree‘;

5.this.setting = {

　　check: {

　　　　enable: true,

　　　　chkboxType:{ "Y" : "s", "N" : "sp" }, //勾选 checkbox 对于父子节点的关联关系，详细可看API

　　　　chkStyle:"checkbox"

　　key:{

　　　　checked:"checked",//zTree 节点数据中保存check状态的属性名称。默认值："checked"

　　view:{

　　　　selectedMulti:true//允许选多个

　　} ,

}　复选框就可以显示了

　*坑*:我不知道zTree有没有全选和反选我自己写的时候chkboxType:{ "Y" : "s", "N" : "sp" }并不能满足我的要求，因为我要实现如果一个父节点的所有子节点都选中了那么该父节点也要选中

　　如果chkboxType:{ "Y" : "sp", "N" : "sp" }写成这样，那么我点击子节点它的所有父节点都会选中

　　所以我自己在onCheck回调中自己写了一个方法来判断子节点和父节点的关系:

　　callback: {

　　　　onCheck:(e,treeId,treeNode)=>{

　　　　　　let treeObj=zTree.getZTreeObj("ztreeone")

　　　　　　　　在点击的时候就判断它有没有父节点

　　　　　　　　1.有父节点拿到它的父节点

　　　　　　　　2.判断当前节点的父节点的选中状态，同步更新父节点的状态

　　　　　　　　3.如果该父节点下所有子节点都被选中，则选中它--子节点关于父节点的全选操作-chkboxType:{ "Y" : "s", "N" : "sp" }并不能实现

　　　　　　let parentNode=treeNode.getParentNode();

　　　　　　//这里用了while循环，因为需要循环多次，而且并不知道它上面都多少父节点，判断条件就是它上面还有没有父节点

　　　　　　while(parentNode){

　　　　　　　　if(parentNode.check_Child_State==2){ //check_Child_State==2表示该父节点下所有子节点都被选中

　　　　　　　　　　treeObj.checkNode(parentNode,true,true) //更新改父节点状态

　　　　　　　　}else{

　　　　　　　　　　treeObj.checkNode(parentNode,false,false)

　　　　　　　　}

　　　　　　　　//继续获得该父节点的父节点知道他是跟节点为止

　　　　　　　　parentNode=parentNode.getParentNode();

　　　　　　　}

　　　　　　//拿到树中所有节点属性checked为true的节点

　　　　　　//坑*************这里需要注意的是，在拿到所有选中的节点之前,必须先更新节点的选中状态，否则会出现

　　　　　　　　//1.我先勾选父节点-》子节点全选

　　　　　　　　//2.我取消了其中一个子节点的选中，父节点也取消了选中

　　　　　　　　//3.getCheckedNodes(true)去选中的所有节点，会取到该父节点(视图上显示父节点未勾选)，控制台输出父节点的checked为false

　　　　　　　　//4.原因我也不是很清楚，但是如果在取所有选中的节点的之前更新一下节点状态，就不会有这个问题

　　　　　　let nodes=treeObj.getCheckedNodes(true)

　　}

Angular7中zTree的用法和踩过的坑(全选反选)

原文：https://www.cnblogs.com/nihao94/p/11131656.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)