A: The project needs to add a drop-down box tree
Renderings:
So start writing, according to ztree official API configuration step by step, and finally found no box, found through Baidu is not introduced js
1.npm i ztree -S
2. Add "node_modules / ztree / js / jquery.ztree.all.js" in angular.json, the line on the line
3. introducing ztree <ul id = HTML page "zTree" class = "zTree"> </ UL>
4. To zTree introduction of ts page zTree Import 'zTree';
5.this.setting = {
check: {
enable: true,
chkboxType: { "Y": "s", "N": "sp"}, // check the checkbox for the parent-child relationship, and a detailed look API
chkStyle:"checkbox"
},
key:{
checked: "checked", // zTree node data stored check the status of the property name. Default value: "checked"
},
view:{
selectedMulti: true // allowed to choose more
} ,
The box may be displayed}
* Pit *: I do not know zTree there is no full election and anti-election I wrote it myself when chkboxType: { "Y": "s", "N": "sp"} does not meet my request, because I want to achieve if all child nodes of a parent node is selected then the parent should be checked
If chkboxType: { "Y": "sp", "N": "sp"} written so, then I click on all the child nodes will select its parent
So I myself onCheck callback to write a method to determine the relationship between child and parent nodes are:
callback: {
onCheck:(e,treeId,treeNode)=>{
let treeObj=zTree.getZTreeObj("ztreeone")
/*
When clicking on the judgment that it has no parent
1. The parent node has got its parent
2. Analyzing selected parent node of the current node, the parent node of the synchronization update state
3. If all child nodes of the parent node is selected, select it - select all child nodes of the parent node on -chkboxType: { "Y": "s", "N": "sp"} does not achieve
*/
let parentNode=treeNode.getParentNode();
// use a while loop here, because of the need cycle times, and above all it does not know how much the parent, to determine the condition that there is no parent node above it
while(parentNode){
if (parentNode.check_Child_State == 2) {// check_Child_State == 2 are represented by all child nodes of the parent node selected by
treeObj.checkNode (parentNode, true, true) // update the parent node status change
}else{
treeObj.checkNode (parent node, false, false)
}
// continue to get the parent node's parent node know that he is now far
parentNode=parentNode.getParentNode();
}
// get the property checked all the nodes in the tree node to true
// pit ************* It should be noted that prior to get all the selected node, you must first update the selected node, there would be
// 1 I first checked parent - "child node Select
// 2. I canceled check one of the child nodes, the parent node also canceled check
//3.getCheckedNodes(true) to all the selected nodes, the parent node will be taken to the display (the parent view unchecked), the parent node of the checked console output is false
// 4. The reason I was not very clear, but if you take in all the selected node node status update about before, do not have this problem
let nodes=treeObj.getCheckedNodes(true)
}
},