一：項目需要加一個樹形的下拉框
效果圖:
於是開始動手寫,按照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)
}
},