Javascript tree menu (1): tigra tree menu for Dynamic Data Loading

I want to use a javascript tree menu, find a ready-made tigra tree menu, and check the effect. If it is good, I plan to use it. Http://www.softcomplex.com/products/tigra_tree_menu/

My requirement is to dynamically build a tree structure based on the data retrieved from the server. The internal implementation of tigra tree menu is to use document. write writes the tree structure content to the page and dynamically adds the <script/> label, document. write will re-open an output stream and directly write it to the page to delete all the original documents.

Conclusion: tigra tree menu is suitable for knowing the contents of the tree structure before loading the page, and then using it directly according to its documentation. It cannot be used directly for generating menus of dynamic data.

I have forgotten (or may be lazy) to add this article. Now I want to add that to dynamically load data in the tree structure, just modify the source code of tree. js.

1. Back up the original tree. JS, copy a copy and name it mytree. JS, and modify it on the mytree (the reason for backup is that you are worried about errors)

2. Modify the toggle function of the tree. The original function is: This. Toggle = function (n_id ){
VaR o_item = This. a_index [n_id]; o_item.open (o_item. B _opened )};

To:

this.toggle = function(n_id) {var o_item = this.a_index[n_id];

'// The following function parameter o_item.a_config [0] is user data. The obtained sub_items should be an array var sub_items = get_sub_items (o_item.a_config [0]); // loadoffice (); values (2, 1); // delete one element on position [2] If (sub_items.length> 0) {o_item.a_config = o_item.a_config.concat (sub_items); // o_item.a_config.push ("loading... "); For (VAR I = 0; I <o_item.a_config.length; I ++ ){

// Here is the construction of the subtree new tree_item (o_item, I);} o_item.open (o_item. B _opened);} else {utils. alert_msg (false, "no information can be displayed ");}};

Note: The above is my application in the real environment. The specific content can be modified according to the actual situation.

3. the last part of the function tree:

For (VAR I = 0; I <this. a_children.length; I ++ ){
Document. Write (this. a_children [I]. INIT ());
This. a_children [I]. open ();
}

Directly use document. Write to write it on the HTML page. Generally, this section also needs to be modified (see where dynamic content needs to be rendered ). In my environment, change:

For (VAR I = 0; I <this. a_children.length; I ++ ){
// Document. Write (this. a_children [I]. INIT ());
This. tree_view + = This. a_children [I]. INIT ();
Dom_ele.innerhtml = This. tree_view;
This. a_children [I]. open ();
}

The dom_ele in the second line of the above function is the declaration of the function tree (a_items, a_template, dom_ele) function modified by the author. You can modify it as needed.

4. Generally, when you click a node in the tree, you may need to trigger the desired event, which can be modified in the item_select function.