New clothes for Treeview: elegant name

[Reference]

Microsoft. web. UI. webcontrols. treeview is one of the IE webcontrol series components. A Foldable/expanded hierarchical tree directory can be displayed in the form of client scripts. This article briefly describes how to transform Treeview to meet the needs of applications in some environments, the transformation method is to add a wrapper on the periphery of the Treeview to meet certain output requirements while maintaining the integrity and performance of the Treeview.

[Why is transformation required]?

When I first came into contact with the IE web control series controls, Treeview was the most attractive to me. I was so excited for a while, but soon I found that this was a bit useless. I tried to find the identifier of the node sent back to the server and found that I could only find the index value of the node on the server. this index value is meaningless to me. for example, when my tree shows China's Administrative Division data, I click the "Hebei" node. The data is sent to the server. The identifier of Hebei when I expected the data, however, I can only get index values like 0.0.0.1. in this way, the Treeview becomes useless.

[Solution]

The idea was to directly transform the Front-End Script resource file (HtC ). later I thought it was inappropriate. although Treeview does not provide technical support, it is still being upgraded. and there is not much effort to study that lengthy script file. and modify the publishedCodeI didn't just pay attention to some of HTC's open methods and features. although the server can only identify nodes by index, each node contains a nodedata attribute within the data file. when the Server adds a node to the tree, you can set the node nodedata feature. in addition, the data can be obtained by the getattribute ("nodedata") method on the client. there is no problem with data writing, reading, and holding. what is missing is a packaging process.

[Idea]

To obtain nodedata on the server side, we must implement the post process from the front-end data to the backend. this process requires a short script to implement. the script captures the onselectedindexchange event of the client tree object (selected node changes, which are usually triggered when you click a node). The main process of the script is:

1. Find the currently clicked Node

2. Obtain the node's nodedata

3. Post the data to the backend.

4. The back-end code interprets the data logically and writes it to the selectednodedata public feature.

[Implementation]

Ascx design:

Create a new ascx In the IDE environment. add a panel Server Control in the HTML code section. only one treeviewb server tag is added to the Panel. <ie: Treeview id = maintree runat = server/>

Backend environment preparation stage:

In addition to setting tree data during ascx initialization, add a hidden-type HTML form input element to the container by using the add method of the controls set at the end of the panel control. and the name of the input element is set to the uniqeid of ascx. this hidden domain is responsible for implicitly posting data to the backend.

Frontend Event Control

You must respond to the user's click operation. we found the Treeview reference at the front end and captured its selectindexchange event (set the event handle to the front-end function ). next, find the currently clicked node. then obtain the nodedata. set the nodedata value to the value of the hidden field in a certain logic. then, upload the form submit on the client.

Sample Code:

Document. getelementbyid ("_ tree_container"). All. Tags ("Treeview") [0]. onselectedindexchange = function (){

VaR source = event. srcelement;

VaR hidden = Document. getelementbyid ("_ tree_container"). All. Tags ("input") [0];

VaR node = source. gettreenode (source. selectednodeindex). getattribute ("nodedata ");

VaR Index = source. selectednodeindex;

If (node! = NULL) {If (node. length> 0 ){

If (node. indexof (":")! =-1 ){

Hidden. value = node + ':' + index;

Document. Forms [0]. Submit ();

}

}

}

Backend sending event processing

If the control can handle the send-back event. the control must implement the ipostbackdatahandler interface. in the required loadpostdata method, you can obtain the nodedata value sent back to the backend. this value is analyzed based on the specified logic and published to the selectednodedata feature of the backend. this process can also trigger an event.

[Open methods and features]

Note that. after this scheme is implemented, the common features and methods of the original Treeview will become invisible outside of ascx. in this way, the Treeview cannot be directly driven out of ascx. that is, data cannot be written to the tree. if we want to apply the new ascx to the Treeview before packaging the application, we must expose all the original APIs to ascx again. this requires a certain amount of work. it is also necessary to meet cohesion requirements. but in general. in a project, we cannot use a variety of methods to write tree data. this is a trade-off process. we can choose the methods that we are most familiar with and need to publish. until we can afford the workload.

On the other hand, if our tree contains some fixed data. that is, if the data is not directly operated on outside of ascx, we can set the data in ascx. in this way, we do not need to expose any specific Treeview APIs.

[Application]

[Additional description]
the above processing process is only wrapper on existing APIs, rather than transformation.
In addition to nodedata, you can modify the data analysis and processing logic and send other data to the backend for processing.
for "processing sending and returning data", refer to "processing sending and returning data" in the msdn document or refer to the ipostbackdatahandler interface overview.
this article is based on older Treeview versions. This API may be provided in the latest version of Treeview. in this way, no need to be so cumbersome.