Using XSLT and XML, Ajax implements an infinitely hierarchical tree navigation

ArticleDirectory

• 1. Use XML to store data in the background
• 2. Use XSLT to display data
• 3. Use Ajax technology to add and delete nodes
• Disadvantages:

Although there are already a lot of tree navigation, as a beginner, I still want to get one by myself and see how this is implemented? By the way, I learned JavaScript, XML, XSLT, Dom, and so on. It seems simple, but it took a lot of effort to do it. There are too many things to be improved, but the basic functions have been implemented.

This tree-based navigation is introduced. Although Microsoft provides a Treeview, it is not easy to implement dynamic loading. Because the webform mode keeps the page refreshed for newer nodes, although Asp.net Ajax is available, however, I really hate the messy front-end generation when using the Asp.net webform model.CodeIt is inconvenient to combine with Js. Although there is a script manager, who wants to quote a line of written JavaScript code with quotation marks and finally write it to the front end, he really loves and hates webform. He can improve efficiency, but it is not a good thing. Now he has the Asp.net MVC model. After learning about it, I feel like it is still correct, I have never used it, so it is recommended that beginners do not learn any webform here. It is useless! Microsoft has packed a lot of things. It takes a lot of time to learn this processing process, and the page will survive in cycles and so on! Finally, we need to implement some functions around the bend, Khan! Let's talk about this tree-based navigation. Of course, the front-end JS is all written in one sentence. Even Ajax is not implemented using jqurey, lajax. the JS file has a simple implementation of Ajax communication. You can see jquery in the file. I implemented a pop-up dialog box using jquery, and jquery's syntax is quite uncomfortable.

This tree navigation mainly has the following features:

1. Use XML to store data in the background

Just like Treeview, sitemap is used to store the site structure. The XML format is the same as that of the tree, and the tree data should be more visualized and simple. XML operations require some simple Dom knowledge. If you understand XPath, it is easy to operate XML nodes. XPath is really easy to use. It takes several hours to get started, but it brings great convenience.

Each node in XML data has a unique key value, which is convenient for xpath to select nodes. The key value is unique. If you want to manually write this XML document, make sure that the key value is unique. Of course, in the previous versions, I did not use this key value. Instead, I used the XPath of each node calculated by the position () of xpath to compile the XML version without the key value. If you are interested, you can check http://www.elooog.cn/post/29.html to find that the XPath of position () computing nodes makes great inconvenience when dynamically adding and deleting nodes. Because adding and deleting nodes changes the computing result of position, not easy.

2. Use XSLT to display data

XSLT is very powerful. When combined with XPath, formatting XML is like writingProgramSimilarly, it is much more convenient to use the functions provided by XPath to determine the number of nodes and then feel the style of the returned node. For example, the last node is different from the intermediate node, and the XSLT template mechanism is used, the addition of statements that control the process and the built-in functions of xpath makes it interesting to format XML into the desired HTML. The front-end displays the table to display the tree structure.

3. Use Ajax technology to add and delete nodes

This tree-based navigation front-end node is dynamically loaded to avoid loading speeds due to excessive nodes. The front-end uses Ajax callback parameters to obtain information about sub-nodes and uses ajax to prevent front-end refreshing, adding and deleting nodes at the frontend are synchronized in the background.

Both adding and deleting nodes do a lot of work, because the added and deleted nodes may be intermediate nodes or the last node. To ensure that the dotted lines are correctly displayed, I want to do some work here.

For example, when you delete a node, the node you delete may be a parent node or a child node. You can delete multiple nodes together, but you cannot delete them at a time, because the index of the row in the table changes when the node is deleted, and the parent node deletes the child node, the solution is to obtain the deleted node cyclically, delete a node in a loop so that no problem will occur.

Disadvantages:

1. I feel that there is a problem when saving XML documents in the background. Because of the full reading and saving, it may be slow when there is a large amount of data to be solved.

2. If this project is difficult to use, it can be used like a plug-in, for example, like fckediter. It would be nice to make a webcontrol.

3. browser compatibility. Now it can run normally under IE6, and deletion under FF cannot be implemented normally. There are also solutions.

If you are interested, you can download it and try it out. Download Page address: http://www.elooog.cn/view.asp? Id = 45