Refreshing Treeview Control for dynamic data loading (7)

The last time I talked about how to support the infinite number of Dynamically Loaded Treeview controls and how to prepare the server data. However, it is just a small demo instance. In actual use, the data on the server may be completely different, but no matter how it changes, make sure that the request/response structure of the tree data can be formed.

Because the Treeview can only be displayed after the node information is loaded, We need to manually generate the root-level node here.CodeExample:

< Script Language = "JavaScript" >
VaR Tree =   New Tree ();
VaR URL = Tree. m_attributes.m_url + ' ? Nid = 1 ';
VaR Metadata = _ Xmlhttppool _. getremotedataex (URL );
VaR Data = Metadata. substring (metadata. indexof ('$ ') + 1 );
VaR Arydata = Eval (data );
For ( VaR I = 0 ; I < Arydata. length; ++ I)
{
// ["1", "movie", "-1", "Mar 29"],
VaR Arynode = Arydata [I];
VaR Node =   New Treenode (arynode [ 1 ]);
If (Arynode [ 0 ] ! =   - 1 )
{
Node. m_islazyload= True;
}
Node. m_serverid = Arynode [ 4 ];
Tree. Add (node );
}
If (Tree. m_count >   0 )
{
Tree. Show (document. getelementbyid ('loadtree '));
}  
</ Script >

It should be noted that we are using the root-level data obtained in synchronous XMLHTTP mode. Why not use Asynchronization here? This is determined by the node relationship. As I mentioned in the first section, each layer of the Treeview is actually an independent tree, and then a tree is mounted under the node treenode, it forms an infinite structure. When we get the data at the root level, there is no treenode. We use synchronous connections to ensure the order in which the original data is obtained. Of course, in the dynamic expansion of sub-nodes, we use the data obtained by asynchronous XMLHTTP.

When we are in expand a treenode, if the islazyload attribute of this node is true, execute the Code:

Treenode. Prototype. loadnodes =   Function ()
{
VaR Childtree =   This . M_element.nextsibling;
Childtree. style. Display = 'Inline ';
This. m_ischildexpanded= True;
This . M_element.opicon.src = Treestyle. opicon ( This . Getopiconname ());
Childtree. cells ( 1 ). Innerhtml = ' < IMG SRC = " '+ Treestyle. opicon ('bottomline ')
+' " Border = " 0 " Align = " Absmiddle " > < SPAN Style = " Color: blue; " > Loading </ Span > ';
VaR URL =   This . Attributes ('url ') + ' ? Nid = ' +   This . M_serverid
+ ' & CID = ' +   This . M_id + ' & T = ' +   New Date (). gettime ();
_ Xmlhttppool _. getremotedata (URL, This . Loadingnodes );
};

In the above call, the URL is a request similar to the following:
Http: // localhost/Treeview/gettreenodes. aspx? Nid = 1 & cid =__ treeobject _ 11 & t = 12349803

NID is nodeid, CID is clientid, and T is a timestamp (used to bypass the cache mechanism of IE ).

The returned data is also described last time, as shown in the following figure:

__ treeobject _ 11 $ [
["2", "dv ", "-1 ", "Mar 22", "2"],
["5", "Mainland China", "-1", "APR 2", "9"],
["14", "Hong Kong and Taiwan", "-1", "APR 2", "34"],
["63", "Europe and America ", "-1", "APR 2", "174"],
["80", "Japan and South Korea", "-1", "APR 2 ", "226"]

In our XMLHTTP callback function, we mainly do three things:
1. Find the parent node of the returned data, that is, the child node of the data;
2. Generate a subtree Based on the returned data, and append the subtree to the parent node;
3. Update the attribute Status values in the parent node and child tree, such as m_childtree and m_parentnode.

The reference code is as follows:

Treenode. Prototype. loadingnodes =   Function (Metadata)
{
Try
{
VaR Clientid = Metadata. substring ( 0 , Metadata. indexof ('$ '));
VaR Data = Metadata. substring (metadata. indexof ('$ ') + 1 );
VaR Arydata = Eval (data );
VaR Tree =   New Tree ();
For ( VaR I = 0 ; I < Arydata. length; ++ I)
{
// ["1", "movie", "-1", "Mar 29", "1"],
VaR Arynode = Arydata [I];
VaR Node =   New Treenode (arynode [ 1 ]);
If (Arynode [ 0 ] ! =   - 1 )
{
Node. m_islazyload =   True ;
}
Node. m_serverid = Arynode [ 4 ];
Tree. Add (node );
}
VaR Objnode = _ Globaltreecache _ [clientid];
Objnode. m_childtree = Tree;
Objnode. m_tree.applysingleton ();
Objnode. m_islazyload= False;
Tree. m_parentnode = Objnode;
VaR Childtree = Objnode. m_element.nextsibling;
VaR Childnode = Childtree. cells ( 1 );
Childnode. innerhtml = '';
Childnode.appendchild(tree.render(childtree.doc ument ));
}
Catch (E)
{
_ Debug (E, metadata );
}
};

// In a callback function like this, this usually does not appear, because this refers to window.

Originally, step 2 is troublesome, but because we get the metadata of the sub-node, we also send the Client ID of the node to the server. The server returns it as is, so we only need to use this client ID and use the global cache of Treeview to easily obtain this node:VaRObjnode=_ Globaltreecache _ [clientid];.

Using such a sub-node loading method, sexy can use asynchronous operations to load data of multiple sub-nodes at the same time (as long as the mouse clicks fast enough ). Load multiple subnodes at the same time, for example:

Note: For more information about _ xmlhttppool _, see here.

To be continued...