Checkbox cascade operations of Asp. Net 2.0 TreeView

1 Preface

When using. Net for Web applications, there is a great worry that there is no TreeView available. Microsoft's TreeView is only used for data display, but the constant refreshing of server controls affects the customer experience. Commercial TreeView (obout treeview/FlyTreeView/Infragistics NetAdvantage Treeview) are all good, especially obout treeview is short and cool, but license is a big obstacle (companies generally do not pay for it ). In general, I do things on TreeView. There are many checkbox operations, especially the association between parent and child nodes. Therefore, the transformation of Microsoft TreeView begins with the Association of parent and child nodes.

2 Brief Analysis of ASP. Net 2.0 Treeview

ASP. Net 2.0 Treeview is very good, but the client operation is almost zero. Microsoft has implemented some JavaScript TreeView. js used by the client, which is not public yet. It is hidden in system. web. dll and released to the client through WebResource. axd as a resource. After carefully analyzing TreeView. js, you will find that the structure of the Html Script automatically generated by Microsoft for TreeView is as follows:

<Div> // tree

<Table/> // Node

<Div/> // subnode of the node. The content in the subnode is one or more <table/> <div/>

</Div>

Therefore, <table/> <div/> constitutes a node, but it is difficult to identify a node in the DOM for the following reasons:

1. The IDS or names are sequentially arranged. The naming rules are as follows: Tree ID + "n" + node sequence number, for example, MyTreen0

Commercial TreeView generally contains hierarchical information in the ID. For example, mytreenodemo-1_2 indicates 1.1.2 That node makes analysis easy.

2. the node name ID described above is allocated to <A/> in <table/>, that is, the link element that displays the plus sign minus sign, this element is in <table/>, making analysis difficult.

3. the leaf node does not have the <A/> In the <table/> described above and cannot be analyzed (So node A and Input nodes appear in my own JavaScript, A node is A link element with "tree ID +" n "+ node serial number" as ID. The Input node is the Checkbox in <table/> and the naming rule is: tree ID + "n" + node serial number + "CheckBox ")

3. Write JavaScript by yourself

No way. You can only write JS functions to process CheckBox cascade operations. Microsoft's TreeView. js and WebForm. js are used. Download link: TreeView2.rar

The method is as follows:
* Adding an OnClick event to the TreeView

Add OnClick = "OnTreeNodeChecked ()" to the TreeView attributes directly ()"

Or: MyTree. Attributes. Add ("OnClick", "OnTreeNodeChecked (event )");

* Write The OnClick event action in this way.

<Script language = javascript type = "text/javascript">
Function OnTreeNodeChecked ()
{
Var element = window. event. srcElement;
If (! IsCheckBox (element ))
Return;

Var isChecked = element. checked;
Var tree = TV2_GetTreeById (<% = SubSysTree. ClientID %> );
Var node = TV2_GetNode (tree, element );

TV2_SetChildNodesCheckStatus (node, isChecked );

Var parent = TV2_GetParentNode (tree, node );
TV2_NodeOnChildNodeCheckedChanged (tree, parent, isChecked );

}
</Script>

TreeView2.js also contains some node access functions for other purposes. As my own needs increase, I will gradually add other features.

Update:
A friend asked: how do I obtain the node value on the client?
The data of the entire tree is stored as XML in ViewState.The Value of the node is placed in ViewState.It is still a bit difficult to analyze.But you can look at this tool (ViewStatueDecoder): http://www.pluralsight.com/Tools. aspx, Will be somewhat inspired

Update 20060624:
For shenghualuo experiment failure, I posted an example: http://files.cnblogs.com/itrust/index.rar
Note: Because the example is from a MonoRail-based project, Save cannot be used.