The ZTree control of the Jquery tree keeps a single path and regularly refreshes it. The ztree control of the jquery tree control

The ZTree control of the Jquery tree keeps a single path and regularly refreshes it. The ztree control of the jquery tree control

Reprinted please indicate the source:Jiq • Chin's technical Blog

I. Requirements

I have a tree showing all available services. Click the service name to expand the node and display all corresponding IP addresses.

I need to display only one service IP address list at the same time, because I do not want to brush multiple service information at the same time, so I need to keep a single expansion path.

In addition, when the Administrator stays on this interface, in order to monitor the address changes of the expanded service, the IP address list of the service needs to be refreshed regularly.

Note: For asynchronous loading of Ztree nodes, refer to this article.

Ii. Solutions

It's easy to keep a single expansion pathDeclare a global variable to record the last expanded node, and then implement the ZTree beforeExpand callback function:

Var lastExpandNode = null; // function zTreeBeforeExpand (treeId, treeNode) {var zTree = $. fn. zTree. getZTreeObj ("tree"); if (lastExpandNode! = Null) zTree. expandNode (lastExpandNode, false); lastExpandNode = treeNode; return true ;}; // ztree sets var setting = {callback: {beforeExpand: zTreeBeforeExpand }};

The beforeExpand function compresses the last expanded ztree node and updates the last expanded node.

To regularly force refresh the IP address list of the expanded service, use the ztree reAsyncChildNodes function to implement:

ReAsyncChildNodes Overview [dependent on jquery. ztree. core js]

Forcibly load the child node of the parent node asynchronously. [Setting. async. enable = true]

You can use this method to reload a parent node that has been attached.

Run this method through the zTree object.

First, set Jquery asynchronous timed refresh when loading the interface:

// Initialize the configuration tree $ (document) when loading the page ). ready (function () {$. ajax ({type: "POST", url: "InitServiceData. action ", data:" ", dataType:" json ", success: function (data) {var zNodes = eval (" ("+ data + ")"); zTreeObj = $. fn. zTree. init ($ ("# tree"), setting, zNodes) ;}, error: function () {alert ("An error occurred while reading the service provider list! ") ;}}); SetInterval (" periodlyFunc () ", 5000 );});

In the timed refresh function, force the last expanded node to be asynchronously loaded:

// Refresh the function RefreshZTree () {if (lastExpandNode! = Null) {var zTree = $. fn. zTree. getZTreeObj ("tree"); zTree. reAsyncChildNodes (lastExpandNode, "refresh") ;}}; // jquery regularly refreshes the function periodlyFunc () {RefreshZTree ();};