Refreshing Treeview controls for dynamic data loading (1)

Last time I introduced how to use the popup window to create an unlimited menu. Due to the limited understanding of JavaScript at that time, and the focus on Some Problems in the popup window itself, there are still many unreasonable aspects about menu design. Later, another Treeview control was created, but the structure was quite messy due to large demand changes. So I took the time to refactor and record some design steps, you are welcome to discuss and give comments.

Although there are already many treeviews created using scripts, it is very difficult to use ready-made controls for your own products. First, you must be authorized for free. Second, you must have all the functions you want.CodeIt is clear that it can be quickly understood and modified. Free of charge may be the simplest requirement, but it is not easy to implement functions and modifications. Therefore, it is easier to implement one by yourself. Microsoft's Microsoft. Web control has a powerful Treeview, but unfortunately it is the data in the background. The expand or collapse node requires the dopostback operation :(.

Since we have already said that there are a lot of ready-made Treeview, this Treeview must be on the shoulders of giants. First, you don't need to get the icon resource by yourself. a. d. treeview gets a set (download a trial version of it, there are some icons in it, you don't need to get it on the web page), originally this stuff is everywhere, but it is too full, there are more than 10 sets of various styles.

The most important thing to make this menu is the data structure and UI performance (of course there are also operations, but this is based on the previous ones ). The data structure of the Treeview is very similar to that of the menu. A tree class and a treenode class can be combined and nested. It only requires a proper subtree indent on the display, which is slightly more difficult than the menu, because the menus are positioned relative to the parent menu entries. The UI uses the table element as the overall menu, and each line of TR element as a menu entry. This is not difficult, but the most difficult thing is the hierarchy indent of the Child tree. From the tree control I have seen, it is similar to recursion to generate hierarchy lines of the tree. Since I recently worked on a menu control, I very much hope that, like the menu, the sub-menu will be much simpler to implement by simply focusing on the parent menu entries, so I designed such a new menu UI element placement level.

R.a. the D-tree control uses the DIV element to generate the UI representation of the tree. It uses the nested Div to implement the subtree. However, the subtree indentation is depressing, it uses a lot of images as space (because it is difficult to control the width with other things ). In my implemented Treeview, each tree layer is completely independent. As a whole, the Child tree falls into the parent treenode, And the indentation is automatically maintained by the menu level, that is to say, each menu item generates the same HTML code.

Tree Structure:

Function Tree (attribute, style)
{
This . Extends (collectionbase );
This . M_nodes =   This . M_innerarray;

This . M_parentnode =   Null ;
This . M_activenode =   Null ;
This . M_element =   Null ;
This . M_treetype = Treetype. normal;
This . M_treelevel =   0 ;
This . M_iseventattached =   False ;
This . M_id = _ Globaltreecache _. newid ();
_ Globaltreecache __[ This . M_id] =   This ;

This . M_attributes = Attribute ? Attribute: New Treeattribute ();
This . M_styles = Style ? Style: New Treestyle ();

This . Insertat =   Function (Node, index)
{
This . Base. insertat. Call ( This , Node, index );
Node. m_tree =   This ;
};

This . Tostring =   Function ()
{
Return '[Class tree]';
};
}

In this structure, m_treelevel is the number of layers of the tree. Originally, using this table nested structure, you do not need to know the hierarchy in the tree. However, if you do not know whether the hierarchy of the current tree is the root layer, the operation prompt icon before the node cannot be correctly generated. _ Globaltreecache _ is a global hash table. For the principle, see section 3 of menu implementation to quickly search for treenode and avoid traversing the entire tree every time. M_attributes & m_styles is a class that sets the Treeview attributes and styles. In a Treeview, only one instance is maintained.

The structure of the treenodebase class (all UI-related content of treenode is generated in treenodebase ):

Function Treenodebase (text, action, icon, subtree)
{
This . M_text = Text;
This . M_tooltip = '';
This . M_atction = Action;
If (Subtree)
{
Subtree. m_parentnode =   This ;
This. M_childtree=Subtree;
}
This . M_tree =   Null ;
This . M_icon =   Null ;
This . M_iconpath = Icon;

This . M_ischildexpanded =   False ;
This . M_islazyload =   False ;
This . M_isloaded =   False ;
This . M_checked =   False ;
This . M_disabled =   False ;

This . M_element =   Null ;

This . Tostring =   Function ()
{
Return '[Class treenodebase]';
};
}

This class is clear, and the role of each attribute is clear at a glance.

The next section describes the treeattributes and treestyle classes.

Note: collectionbase, extends, and call.

To be continued...