about using CSS styles to hide unwanted text, and to implement a tree menu

Not long ago According to project needs, need to write a page, in the page need to dynamically implement a tree-shaped menu, after asking Niang, choose to use a treetable JS plugin. Http://zhanchaojiang.com/demo/demo/treeTable.html This is an introductory address to the plugin. In this plug-in has the following tree: Theme:default or Vsstyle, default, the difference should be in style, default is plus minus, Vsstyle is a triangle. expandlevel: The number of layers that are expanded by default, the default value is 1. That is, the level at which the tree expands when the page is refreshed. Column: The ordinal of the columns that can be controlled, which is 0 by default. BeforeExpand: Expands the event triggered by the child node, which can be used for asynchronous requests using AJAX. onSelect: function {A Click event for the element that owns the controller custom attribute, and return false to abort the expansion.

You need to introduce jquery.js and treetable.js when using the plugin, in addition to the corresponding CSS style files, as well as the images used.

In the use of this plugin also encountered a problem, that is, to the AJAX request to the data rendering, with jquery Click Binding event, there is a "delay" phenomenon, that is, the first click does not trigger the binding event, the second click to trigger. The workaround is to use live to bind the event, because live is binding an event for an element now and in the future.

In addition, I encountered the need to hide the extra text in the tree menu and replace it with "...". The solution using CSS is:

<style>
Table Td{white-space:nowrap;overflow:hidden; text-overflow:ellipsis;}
Table {table-layout:fixed;}
</style>

Then add the title attribute to each TD, so that you can display the extra hidden text when the mouse moves up.

These are just a little bit of work in the solution to the small problem, for me so just the novice, 1.1 points to learn, can gradually become the great God. Cheer Up ~

about using CSS styles to hide unwanted text, and to implement a tree menu