Dhtmlxtree directory tree Add right-click menu and drag-and-drop sort implementation _php instance

Source: Internet
Author: User
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.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.