Completed the analysis of Ajax tree attachment principles

First, you must correct an error in the previous blog titled "ajax first experience in Rails": In the previous blog, I said, "To use Ajax in rails, partial templates are required ", it has been tested by practice and is incorrect. It is hereby corrected. Practice is the only criterion for testing truth. After implementing the Ajax tree through RJS in the project, we can see that by using insert_html, replace_html and other auxiliary methods, you can directly operate on the elements on the page without using a partial template.
The entire implementation process is still somewhat tortuous:

The previously used page for generating the tree structure is to generate the entire tree structure directory at one time using all the data obtained from the server through a series of Javascript script functions. This method is easy to deal with the functional menu of the system. However, to generate a tree structure containing thousands of data entries, it takes more than a dozen seconds for the client browser to establish and display the entire tree structure on the page, this is intolerable for users-in fact, it is intolerable for our developers. A feasible method is to use Ajax technology to first display the first node of the tree structure. When you click a node, you can obtain the child node of the node from the server and display it. In this way, the amount of data that each interaction with the server is small, accelerating the page response.

At first, I planned to use the Ajax mechanism in rails in combination with the JavaScript Functions in the previous version. However, the idea of that version is to generate a tree structure based on the tree structure data obtained from the server by generating a series of JavaScript function calls to be executed on the client page through loops and recursion. At this point, it is quite in line with the Ajax idea, but the next step is quite different: the old version will generate a large string of JavaScript function call strings, completely returned to the client page at a time, the client page has obtained this string before loading. Simply load it and execute it at one time to generate a tree structure. In this way, there is no chance to plug in Ajax.

This cannot be done, so I turned to someone else's online Ajax tree and tried to port it for my use. I have found a. Net version, which is written in C # and has not been carefully read. So I started vs2005, built the aspx project, and studied the. NET version of the Ajax tree. This version comes with an Access database with some demo data. After IIS is mounted, it runs smoothly. This Ajax tree is quite powerful, allowing you to add, delete, edit, and drag and drop Tree nodes on the page.CodeIt is also clear: An HTM page and An ASPX page, in which the ASPX page defines some server-side functions, and organizes the corresponding HTML code segment to be returned to the HTM page. However, it is not easy to port the code. First, you are not familiar with the idea of generating HTML code segments and cannot control the Code. In addition, it uses response. write returns the generated HTML code segment, which is different from the idea of directly specifying page elements in RJS for control.

It is also because of the exploration of the above two methods that makes my idea of creating an Ajax tree clearer. In the end, I decided to do it myself, create a rails file by yourself. Although the tree was finally moved from the core content to the details control, there were several problems in the middle, and some did not know whether rails itself was not supported, some other books and others can work, but I cannot. I do not know the reason, which is listed here. If someone can answer this question, I hope you will not be enlightened! Thank you!

Problem 1: using the RJS insert_html helper method, you cannot add a row (<tr>) at the end of a table, even if you write a simple testProgramNo. Finally, I used Div and span as containers to add tables to them, that is, each node of the tree is loaded with a table with only one row.

Problem 2: When Using RJS, in the "render: Update" code segment, you can only use a simple statement to call the auxiliary method. Other statements, no matter if, or use another helper method, and all the code is invalid. I wanted to add an element with insert_html and call JavaScript functions. This would not work. In the end, I put an empty container at the place where the element is to be inserted, and then replace_html is used, the empty content in the container is changed to the returned HTML code segment, which also achieves the effect of adding page elements.

Question 3: This is the most strange problem. When I combine the code of the HTML element to be returned, because the element still has an Ajax link, therefore, we wanted to use "# {}" to embed Ruby code. This method is theoretically feasible. But in practice, I remember that it was only successful once or twice, basically, Ajax results cannot be achieved (in fact, they are ineffective ). In desperation, I checked the Page code based on the first level tree node displayed on the page, saw the generated Ajax code, and then followed it like, replace the part I originally wanted to use Ruby code -- that is to say, I did not use embedded Ruby code, but directly wrote the Ajax code to be generated -- how ugly this code is!

However, there are some things that can be summarized in the whole process:

Summary 1: some of the text to be displayed in the tree node will have the plus sign "+", and it happens that the text is still a parameter to be sent to the server. In this case, when combining the HTML code segment to be returned, the plus sign is treated as a connection string. If necessary, replace the plus sign with other symbols that will not be misunderstood, such as the underscore "_", when it is passed to the database for query, It will be replaced. In Ruby, the function that replaces the pattern in the string with the specified content is gsub. For example, str. gsub ("+", "_") replaces the plus sign in STR with an underscore. The first parameter of the function can also be a regular expression.

Conclusion 2: each tree node to be displayed on the page is controlled by a table with only one row. The advantage is that each node can independently control the display position, instead of taking the colspan attribute into consideration, you only need to add the specified number of TD in the previous step. For details, see "Summary 3 ".

Conclusion 3 (how to control the display level position of a tree node): Click the tree node and send the node ID to the server to obtain the subnode of the node. At the same time, the level of the current node is returned (the level of the first node displayed on the page is 0 ). When the child node HTML code segment is generated, the level of the parent node is obtained, plus 1, that is, the level of the child node. Create a loop based on the number of levels and add the corresponding number of TD to the table containing the sub-node content. In the added TD, fill in a number of spaces () (quantity customized, generally 2 ~ 3 is recommended), but spaces can only be used with TD, otherwise it is prone to misplacement. Alternatively, you can use a Windows drawing tool to create a BMP file with a small white block (the size of the block is determined by the size of the existing image in front of the node in the tree ), then embed the small block image in TD. For example, for a second-level node, its HTML code segment is:

secondary node

.