How to add right-click menu and drag-and-drop sorting to dhtmlxTree directory tree

How to add right-click menu and drag-and-drop sorting to dhtmlxTree directory tree_PHP tutorial

WBOY

Release： 2016-07-21 15:12:08

Original

1232 people have browsed it

In a previous company’s internal management system (InnerOA), I used dTree for the structure of the directory tree to achieve unlimited directory display and right-click menu functions (the right-click menu includes: create, modify, share, delete, Refresh and other functions, as shown in the picture below)

Some knowledge about the directory tree in the company's internal management system (InnerOA) will be compiled and provided with source code when there is time.

But the only regret about dTree is that it does not support the drag and drop sorting function, which has been a problem that I have been struggling with after completing InnerOA. After checking some content about directory trees on the Internet, dTree is the one that I currently think is most suitable for my project. By chance, I discovered another powerful directory tree, which is what this article refers to: dhtmlxTree, which supports drag and drop functions. However, I did not find similar DEMO or functions in the source code. I only found that it provides a parameter to enable drag and drop, but , which also made me determined to solve the drag-and-drop sorting problem of the directory tree, so I spent some time studying the source code and combined with the experience summarized in the dTree project, and finally realized my needs: free drag-and-drop sorting, transplantation of dTree's right-click menu function, and realizes right-clicking on the selected directory and popping up the menu. You can perform the following operations based on the current directory:

1. Create a new directory under this directory

2. Modify the current directory name

3. Delete the current directory

4. Refresh the page

5. Other functions can be added, such as "sharing". In the company's internal management system (InnerOA), I use the sharing of the Windows operating system as a prototype, set up "self-reading sharing" or "writable sharing", and can specify sharing to a certain user (or multiple users or even all users). In this way, only the users who set up sharing can see the shared content.

Since it is not possible to demonstrate online, here are a few pictures to illustrate (source code download: http://download.csdn.net/detail/zm2714/4544616):

1. You can right-click on any directory to create a new directory

2. You can right-click on any directory to modify the current directory. Except for the root directory.

The above picture explains: The root directory cannot be modified, that is, the Books in the picture cannot be modified. This id value is -1. This is a special ID. Flag is the root directory.

The above picture explains: Any other directory can be modified. In actual use, it is the ID value of the directory in the database. In the above figure, the ID value of "directory ccc" is 3.

Instructions for the above picture: After modifying the name, click Save.

3. You can drag any directory other than the root directory and sort by dragging.

Drag-and-drop sorting principle: When dragging the directory to be selected to its parent directory, its time is updated to the current time. Sort by time DESC. This will appear first in the "parent directory". Loop this operation to achieve the sorting function.

2. Code implementation
1. Reference js files and style files

Copy the code The code is as follows:

2. Program implementation

Copy code The code is as follows:

Some comment statements in the above source code can be restored during testing and the required values can be viewed. It is helpful to understand the functions described in this article and quickly apply them to your actual projects. Communication is also welcome.

The detailed use of dhtmlXTree is beyond the scope of this article. You can refer to the online tutorials on using dhtmlXTree.