The first thing to do is to correct one of the errors in the new Ajax experience in rails: in the last blog post, I said, "to use Ajax in rails, a local template is necessary," and, in practice, it is wrong to correct it. Practice is the only standard to test truth. After the project really through the RJS implementation of the Ajax tree, we can know that by using insert_html, replace_html and other auxiliary methods, directly manipulate the elements on the page, without using a local template.
The whole implementation process is still a bit tortuous:
A page that was previously used to build the tree structure, using all the data obtained from the server, was used to generate the entire tree directory one at a time through a series of JavaScript script functions. This way to deal with the function of the system menu is also comfortable, but to build a tree structure that contains thousands of data, it takes more than 10 seconds for the client's browser to build the entire tree and display it on the page, which is intolerable to the user-and is intolerable to us developers. Then a feasible way is, using AJAX technology, first display the tree structure of the first node, when clicked on a node, and then from the server to obtain the node's child nodes, displayed. In this way, the amount of data that interacts with the server is small, speeding up the page response.
At first I was going to take advantage of the AJAX mechanism in rails to work with JavaScript functions from the previous version. But that version of the idea is based on the tree structure data obtained from the server, through loops, recursion, in the server side to generate a series of JavaScript function calls to execute on the client page to generate a tree structure. So far, it is more in line with Ajax ideas, but the next step is quite different: the older version is the string that will generate a large string of JavaScript function calls, which is returned to the client page once and for all, and the client page has obtained this large string of strings before loading, simply loading it, Execute it once, build the tree structure. In this way, there is no chance that Ajax would be left to meddle.
Blocked, so I turned to the Ajax tree of someone else on the web and tried to transplant it for me. I've found one before. NET version, written in C #, has not been carefully read. So open VS2005, built the ASPX project, studied this. NET version of the Ajax tree. This version brings with it an Access database with some demo data. After putting IIS up, the operation was quite smooth. This Ajax tree function is very strong, you can implement on the page to the tree node to add, delete, edit, drag and drop mobile operations. The code is also clearer: an HTM page and an ASPX page, where some server-side functions are defined in the ASPX page to organize the corresponding HTML snippet to be returned to the HTM page. However, it is not easy to transplant this, the first is to generate the HTML code section of the idea of unfamiliar, bad control, another point, it is through the Response.Write returned the generated HTML code snippet, and RJs directly specify the page elements to control the idea is not the same.
It is also because of the above two ways to explore, so that I have to do the thinking of the Ajax tree more clearly reason it, I finally decided to do it myself, completely do a rails out of their own. Although ultimately from the core content to the details of the control, it is finally the tree to churn out, but encountered a few problems in the middle, some do not know whether rails itself does not support, there are clearly in the book, others can do, but I this is not. I do not know why, listed here, if someone can answer, but also hope that the generous enlighten! Thanks first!
Problem one: Using RJs's insert_html helper method, you can't add a row (ie <tr>) to a table, even if you write a simple test program. Finally, I use DIV and span as a container to add a table to the solution, that is, each node of the tree is loaded with a table with only one row.
Question two: In the use of RJs, in the "Render:update" code snippet, can only be a simple sentence to invoke the auxiliary method, the other, whether it is a little bit if to judge, or use another auxiliary method, the code is invalid. I would like to use insert_html to add elements, and then call the JavaScript function, and so on, completely unworkable, in the end is to insert the element in the place of an empty container, and then swap replace_html, the container empty content "swap" Into the returned HTML code snippet, which also achieves the effect of adding page elements.
Question three: This is the strangest question. When I combine the code for the HTML element to be returned, because the element continues to have an AJAX link, I wanted to embed the Ruby code with "#{}"-a method that is theoretically feasible, but in practice I remember it as if I had only succeeded one or two times, It's basically not an Ajax effect (it's actually ineffective). Helpless, I based on the initial display of the page of the first level tree node, look at the page code, see the generated AJAX code, and replace it with the part of the Ruby code that I wanted to use-that is, I ended up writing the Ajax code that was going to be generated instead of the embedded Ruby code How ugly this code is!
However, the whole process down, there are some things that can be summed up:
Summary one: Because some of the text to be displayed in the tree node will have the plus sign "+", it happens that the text is still a parameter to send to the server, in which case, when combining the HTML snippet to be returned, the plus sign is treated as a connection string, and, where necessary, the plus sign is replaced with other symbols that are not misunderstood. , the underlined "_", and when the query is passed to the database, replace it. A function in Ruby that replaces a pattern in a string with the specified content is gsub, such as: Str.gsub ("+", "_"), or replace the plus sign in STR with an underscore. The first argument of the function can also be a regular expression.
Summary two: For each tree node on the page to be displayed, with a table with only one row to control, this has the advantage that each node can independently control the display location, without considering the colspan attribute, just add a specified number of TD in front, the specific practice see "summary three."
Summary three (methods to control the display level of a tree node): Click on the tree node to send the ID of the node to the server to obtain the node's child nodes. At the same time, you want to return a level of this node (the level of the first-level node in the initial display of the page is 0). When you generate the HTML code snippet for a child node, you get the level of the parent node, plus 1, which is the level of the child node. Cycle through the number of levels to add the corresponding number of TD to the table containing the contents of the child nodes. In the added TD, fill in a number of spaces () (the number of custom, General 2~3 a suitable), but only with TD with the use of the effect is good, otherwise easy dislocation. Or in advance using Windows drawing tools to do a small white square bmp file (the size of the box according to existing in the tree node in front of the nodes to expand, the picture set up the node), and then embedded in the TD in the Small box picture also line. such as a level two node, its HTML code snippet is:<table><tr><td> </td><td> level two node </td></tr></table >.
