Refreshing Treeview Control for dynamic data loading (9)

After the previous implementation of the Treeview event, the entire Treeview entity is complete. However, in the management of the UI elements, the circular Linked List reference between the script class object and the DOM object is used, so some cleanup work must be done when the page exits, that is, a dispose method is implemented for each class.

Our Treeview uses three classes: Tree, treenodebase, and treenode. The circular Linked List reference between a script object and a DOM object is generated in treenodebase. Therefore, we can clean up the objects in the treenodebase dispose,CodeAs follows:

Treenodebase. Prototype. Dispose =   Function ()
{
If ( This . M_element)
{
This . M_element.clearattributes ();
This . M_element.removenode ( True );
This . M_element =   Null ;
}
For ( VaR Key In   This )
{
Delete   This [Key];
}
};

After the circular Linked List reference between a script object and a DOM object is cleared, the memory usage of IE may be released, but memory leak still exists, in addition, when the bindows component class is dispose, the events and some object references are also cleared. Therefore, we also cleared the references in treenode and tree. The treenode code is as follows:

Treenode. Prototype. Dispose =   Function ()
{
If ( This . M_element)
{
VaR Tr =   This . M_element;
If (Tr. Content)
{
VaR Tdcontent = Tr. content;
Tdcontent. onmousedown =   Null ;
Tdcontent. onmouseover =   Null ;
Tdcontent. onmouseout =   Null ;
Tdcontent. onmousemove =   Null ;
Tdcontent. oncontextmenu =   Null ;
}

Tr. opicon. onclick =   Null ;
If (Tr. checkbox)
{
Tr. checkbox. onclick =   Null ;
}
If ( This . M_childtree)
{
This . M_childtree.dispose ();
}
This . Base. Dispose. Call ( This );
}
};

The tree-class dispose method is mainly used to clear the circular reference between the Treeview object and its iner. The code is:

Tree. Prototype. Dispose =   Function ()
{
If ( This . M_element)
{
VaR TBL =   This . M_element;
TBL. onselectstart =   Null ;
This . M_element.clearattributes ();
This . M_element =   Null ;
}
If ( This . M_container)
{
VaR Elmt =   This . M_container;
Elmt. clearattributes ();
Elmt. onkeydown = '';
This . M_container =   Null ;
}
For ( VaR I = 0 ; I <   This . M_count; ++ I)
{
VaR Node =   This . M_nodes [I];
Node. Dispose ();
Delete   This . M_nodes [I];
}
For ( VaR Key In   This )
{
Delete   This [Key];
}
};

This complete Treeview control is complete. Of course, this is just a solution I implemented. I think the most desirable part of this design is the layout of its UI elements (as described in section 1 ). Other implementation details can be said to be the question of the benevolent and wise. Of course, if you have a better design idea, you are welcome to refer to or discuss it.

This Treeview control does not provide full source code download, because some people have such an idea, so I don't know what to say. Although there is no complete source code, if you are seriously designing a Treeview for the web version, I think this series of acronyms can make you feel more meaningful and rewarding.

The end.