Web application development, a JavaScript tree control based on AJAX technology

Thanks http://www.cnblogs.com/dgrew/p/3181769.html#undefined

In the area of Web application development, JavaScript tree controls based on Ajax technology have been widely used to present hierarchical data items on HTML pages.

At present, the common JavaScript framework and component libraries in the market contain their own tree controls, such as jquery, Dojo, YUI, Ext JS, and some independent tree controls, such as Dhtmlxtree, which perfectly solves the problem of hierarchical data presentation.

The display is inseparable from the data, the tree control mainly uses the Ajax technology to obtain the data source from the server side, the data source format mainly includes the JSON, the XML and so on, and these hierarchical data are generally stored in the database. "Infinite tree Structure", as the name implies, there is no level of restriction, its data usually comes from the database of infinite level of data, the storage table of this kind of data usually includes the ID and ParentID the two fields, in order to represent the hierarchical relationship between the data. Now the problem is, since the data source of the tree control organizes hierarchical data in a format such as JSON or XML , and the hierarchical data is stored in the table of the database, how to establish the relationship between the tree control and the hierarchical data, in other words, How do I convert hierarchical data in a database into a JSON or XML-formatted string of the corresponding hierarchy, which is returned to the client's JavaScript tree control? This is the key technical issue that we need to solve.

This article will take the current market on the more well-known Ext JS framework as an example, the implementation of infinite-level tree structure, the method is also applicable to other similar JavaScript tree control. The EXT JS Framework is one of the top-notch frameworks in rich client development. In the Ext UI control, the tree control is undoubtedly one of the most commonly used controls, and it is used to implement a view of the tree structure. TreeNode is used to implement a static tree structure, Asynctreenode is used to implement a dynamic asynchronous load tree structure, the latter is most commonly used, it is to receive the server side returned by the JSON format of data, the dynamic generation of tree structure node.

The dynamic spanning tree has two ideas: one is to generate all the tree nodes at once, and the other is to cascade the tree nodes (using AJAX to query the next level node each time a node is clicked). For a tree node with large data, it is more appropriate to step-load, but for a tree node with a small amount of data, it should be the most reasonable scheme to generate all nodes at once.

In the actual application development, generally do not encounter special large data volume scenarios, so one-time generation of all tree nodes is our focus on the technical point of research, that is, the key technical issues to be addressed in this paper. Taking the application system of Ext JS as an example, this paper describes how to generate all the tree nodes in the interface by the infinite level data in the database (for example, to display the information of all branches of the bank in a tree form in the interface), and to sort the nodes of each level according to a certain attribute and rules. Show an orderly tree structure. Reprint please indicate the paper publication agent Http://www.400qikan.com

using multi-fork tree to realize infinite tree menu in Ext JS (a method for constructing JSON of multilevel ordered tree structure)

Web application development, JavaScript tree control based on Ajax technology