In a previous company internal management system (Inneroa), for the construction of the directory tree I use the dtree, to achieve the unlimited level of directory display and the right-click menu function (the context menu includes: New, modify, share, delete, refresh and other functions, as shown)
Some knowledge about the directory tree in the company internal Management System (Inneroa) will have time to collate and provide the source code later.
But Dtree's only regret is that it doesn't support drag-and-drop sorting, which has left me stuck in my mind after finishing Inneroa. Looking at some of the contents of the directory tree on the web, Dtree is one of the things I think best fits my project. In a chance, found another powerful directory tree, which is what this article said: Dhtmlxtree, support drag-and-drop function, however, in the source code does not find similar to the demo or function, only found to provide a drag-and-drop parameter, but it also let me resolve the directory tree drag sorting problem, So took a little time to study the source code and combined with the Dtree project summed up the experience, and finally realize my needs: can be free to drag and drop sorting, transplant Dtree Right-click menu function, and to the selected directory right-clicking and pop-up menu, can be based on the current directory, do the following:
1. Create a new directory under this directory
2. Modify the current directory name
3. Delete the current directory
4. Refresh the page
5, can add other functions, such as "sharing." In my corporate internal management system (Inneroa), I was prototyping the sharing of Windows operating systems, setting up "self-read sharing" or "writable sharing", and specifying sharing with a user (or even all users). This allows the shared content to be visible only to the user who has set up the share.
Due to the inability to demonstrate online, the following illustrated with a few figures (source download see: http://download.csdn.net/detail/zm2714/4544616):
1, you can right click on any directory, create a new directory
2. You can right-click on any directory to modify the current directory. But the root directory is excluded.
Note: The root directory cannot be modified, that is, books in the diagram is not modifiable. This ID value is-1. This is a special ID. The flag is the root directory.
Description: Any other directory can be modified. In actual use, the ID value of the directory in the database exists. The ID value of "Catalog CCC" in is 3.
Description: After modifying the name, click Save.
3, can drag the root directory outside any directory, drag-and-drop sorting.
Drag-and-drop sorting principle: When you drag a catalog to its parent directory, update his time to the current time. Sort by time Desc. This will appear in the "Parent directory" of the first one. Loop This operation, you can implement the sorting function.
Second, the Code implementation
1. Reference JS files and style files
Copy the Code code as follows:
2. Program implementation
Copy the Code code as follows:
- New
- Modify
- Delete
- Refresh
Some comment statements in the source code above can be restored at test time and can be viewed with the desired values. Benefit from understanding the features described in this article and quickly apply to your actual projects, while welcoming communication.
The detailed use of the dhtmlxtree is not within the scope of this article. You can refer to the online tutorial on Dhtmlxtree.