Example of ztree mouse clicking/expanding/selecting/checking

1. Expand the specified node according to the treeId and trigger the click event

Ztree. expandNode (ztree. getNodeByParam ("id", treeId, null); // expand the specified node
Ztree. selectNode (ztree. getNodeByParam ("id", treeId, null); // select the specified node
Ztree. setting. callback. onClick (null, ztree. setting. treeId, ztree. getNodeByParam ("id", treeId, null); // trigger the function

2. By default, the specified node is selected and the event is executed.

Var treeObj = $. fn. zTree. getZTreeObj ("treeDemo ");
Var node = fig ("id", "370000 ");
TreeObj. selectNode (node );
Setting. callback. onClick = onClick;

3. Initialize all selected nodes

// Initialize all selected nodes
Function initChecked (){
Var zTree = $. fn. zTree. getZTreeObj ("resTree ");
Var orgId = $ ("# orgId"). val ();
If (orgId! = Null & orgId! = ''){
Var node = zTree. getNodeByParam ("orgId", orgId, null); // Obtain the selected node
ZTree. checkNode (node, true, true); <span style = "white-space: pre"> </span> // display the selected node
ZTree. selectNode (node); <span style = "white-space: pre"> </span> // open the parent node of the selected node
                }
        }

4. Select and expand the specified node

$. Fn. zTree. init ($ ("# tree-div"), setting, zNodes );
        
$ ("# Tree-div" pai.parent().parent().parent().css ("overflow-x", "hidden ");
        
Var ids = $ ("# ids"). val ();
If (ids. trim ()! = ""){
Var tree = $. fn. zTree. getZTreeObj ("tree-div ");
Var strs = ids. split (",");
For (var j = 0; j <strs. length; j ++ ){
Var node = tree. getNodeByParam ("id", strs [j]);
Var parent = node. getParentNode ();
If (! Parent. open ){
Tree. expandNode (parent, true, true );
            }
Tree. checkNode (node, true, true );
        }
 }

5. Add nodes dynamically in ztree

When the ztree tree is displayed, click the Add button for IT sharing. A hidden box is displayed. After the information is added, add the newly added node to the ztree.
However, when the addNodes method is called, the node is added twice. On the Internet, you may find many duplicate ztree nodes, which I will not mention.
Now we provide different solutions. First, we know why the problem of repeated addition occurs.
The reason is: we load it once asynchronously, and then add two nodes by addNodes. (If we call the expand node method here, the expendNode method seems to be difficult, and I have not figured out why. The tree will be automatically expanded when we call the reAsyncChildNodes method)
So I will not call the addNodes method, so that the problem of repeated addition will not occur, but how can I automatically select the added node?
This is really a problem, so we add it in the background:

Async :{
AutoParam: ["id"],
Enable: true,
Url: getUrl
        }

Add this to the ztree attribute. The getUrl is the url of the step-by-step method defined by yourself.
Here we first provide the operation method that ajax returns after entering in the pop-up page:

If ($ ("# customerForm"). valid ()){
$ ('# Mermerform'). ajaxSubmit ({
Type: "post ",
DataType: "json ",
Async: false,
Url: '$ {ctx}/system/cusCustomerInfo/saveAndReturnJSON. Action ',
Success: function (data ){
Var oldNode = zTreeObj. getNodeByParam ("id", $ ("# customerId"). val ());
If (oldNode ){
OldNode. checked = false;
ZTreeObj. updateNode (oldNode );
                }
$ ("# CustomerId"). val (data. id );
Var node = zTreeObj. getNodeByParam ("id", data. Company1_sion );
Node. isParent = true;
ZTreeObj. reAsyncChildNodes (node, "refresh ");
CloseAddDiv ();
            }
});
} Else {
$. Watermark. showAll ();
    }
$ ("# CustomerId "). val (data. id); the value is zTreeObj below. reAsyncChildNodes (node, "refresh"); call the url parameter of the one-step method when refreshing.
Function getUrl (treeId, treeNode ){
Var idsStr = pId = '1 '? $ ("# CustomerId"). val (): $ ("# partcId"). val ();
Return "$ {ctx}/system/cusContactInfo/toSetCustomerToContact. action? IdsStr = "+ idsStr;
The red font is the automatically selected hidden domain id.
In this case, it is OK to add checked = true in the background traversal .}

6. zTree automatically clicks the first node

Var setting = {
View :{
DblClickExpand: true, // double-click to expand
ShowLayer: false,
SelectedMulti: false, // whether multiple selections are allowed
ShowIcon: showIconForTree // The node small icon is displayed.
},
Data :{
SimpleData :{
Enable: true,
IdKey: "id ",
PIdKey: "pId ",
RootPId: "0"
                }
},
Callback :{
BeforeClick: beforeClick,
OnClick: onClick
            }
};
// Load the tree structure information list of the current project
Function loadStructureInfoTreeJson (projectId ){
$. Ajax ({
Type: "POST ",
DataType: "json ",
Url: "../Tools/StructureModel. ashx ",
Data: {act: "LoadModelTreeByProjectid ",
Pid: projectId
},
Success: function (data ){
If (data. length = 0 ){
} Else {
$. Fn. zTree. init ($ ("# tree"), setting, data );
Var zTree = $. fn. zTree. getZTreeObj ("tree"); // Get the ztree object
Var node = zTree. getNodeByParam ('id', 1); // Obtain the vertex whose id is 1
ZTree. selectNode (node); // select a vertex
ZTree. setting. callback. onClick (null, zTree. setting. treeId, node); // call the event
                    }
},
Error: function (){
Alert ("An error occurred while loading the tree structure! ");
                }
});
        }
Function showIconForTree (treeId, treeNode ){
Return treeNode. isParent; // if it is a parent node, a small icon is displayed.
};

7. Search for all leaf nodes in the zTree

 

// Save all leaf nodes 10 as the initial size, not the upper limit of the array
Var arrayObj = new Array ([10]);
 
/*
TreeNode:
Root node
Result:
Array used to save leaf nodes
*/
// Obtain all leaf nodes
Function getAllLeafNodes (treeNode, result ){
If (treeNode. isParent ){
Var childrenNodes = treeNode. children;
If (childrenNodes ){
For (var I = 0; I <childrenNodes. length; I ++ ){
If (! ChildrenNodes [I]. isParent ){
ArrayObj. push (childrenNodes [I]);
} Else {
ArrayObj = getAllLeafNodes (childrenNodes [I], arrayObj );
                }
            }
        }
} Else {
ArrayObj. push (treeNode );
    }
Return arrayObj;
}

8. ztree node acquisition and addition

 

// Retrieve the tree node
Var treeObj = $. fn. zTree. getZTreeObj ("divTreeContainer ");
// Retrieve all nodes in the tree
Var nodes = treeObj. getNodes ();
// Get the node through tid
Var node = treeObj. getNodeByTId (node. tId );
 
// Create a node
Var newNode = {id: 1, name: 'wisdo '', filePath: 'http: // www.111cn.net '};
 
// Append a node
TreeObj. addNodes (parentNode, newNode)

From: http://www.suchso.com/projecteactual/ztree-click-event-checkbox.html