dhtmlxTree目录树增加右键菜单以及拖拽排序的实现

文章标题：DHTMLXTree目录树右键菜单与拖拽排序功能的实现

一直以来，在构建公司内部管理系统（InnerOA）的过程中，目录树的构造都扮演着至关重要的角色。此前，我曾采用dTree来构建无限级目录并实现了右键菜单功能。右键菜单中包括新建、修改、共享、删除、刷新等操作，为用户提供了便捷的操作体验。对于这部分的内容，我后续将有更深入整理并分享源码。

dTree的一个主要遗憾是不支持拖拽排序功能。在实现InnerOA系统后，我一直在寻找解决方案。在深入研究目录树相关内容时，我发现了dhtmlxTree。它功能强大，尤其支持拖拽功能。尽管我在其源码中未找到详细的DEMO或功能示例，仅发现一个启用拖拽的参数，但我决定结合dTree的经验，解决目录树的拖拽排序问题。

经过一段时间的研究，我终于实现了我想要的自由拖拽排序功能，并成功移植了dTree的右键菜单功能。在dhtmlxTree的目录下，用户可以轻松地进行以下操作：

1. 在任意目录下右键单击，选择新建目录。

2. 修改任意目录的名称（根目录除外）。在实际应用中，目录的ID值是由数据库管理的。比如，上图中“目录c”的ID值为3。根目录具有特殊的ID值，如“-1”，表示不可修改。

3. 删除任意目录。

4. 刷新页面以获取信息。

5. 还可以根据需要增加其他功能，如共享。在我的InnerOA系统中，共享功能以Windows操作系统的共享为原型，可以设置自读共享或可写共享，并指定特定的用户或用户组进行共享。这样，只有设定共享权限的用户才能查看共享的内容。

这些操作都可以通过右键菜单轻松完成。除了这些基本功能外，dhtmlxTree的拖拽排序功能也大大增强了用户体验。通过简单地将所选目录拖到其父目录并更新其时间戳（拖动时设定当前时间），即可实现排序。按照时间戳降序排列，被拖动的目录将会在其父目录中排在最前面。重复此操作，可以灵活调整目录的顺序。

由于无法在线演示，我在此通过图像和源码示例（可在

二、代码实现与美化

1. 引入相关文件和样式

在HTML的头部，我们首先需要引入一些必要的JavaScript和CSS文件，为后续的树形结构操作提供基础。这些文件包括jQuery、dhtmlxmon、dhtmlxtree、jquery.contextmenu等，以及为树形结构提供的样式表。还有一个用于弹窗的dialog.js文件。

代码如下：

```html

```

2. 程序实现与功能描述

接下来，我们用JavaScript来实现树形结构的功能。主要包括显示消息、节点拖拽等功能。

代码如下：

```javascript

// 显示消息的函数

function showMsg(id, title, icon, str) {

art.dialog.through({

id: 'msg',

title: title,

icon: icon,

drag: false,

lock: true,

content: str,

ok: function() { art.dialog.close(); }

});

}

// 节点拖拽的函数，确认是否移动节点

function tondrag(id, id2) {

alert("节点ID：" + id + "，目标节点ID：" + id2);

return confirm("是否要将节点 " + tree.getItemText(id) + " 移动到节点 " + tree.getItemText(id2) + "？");

}

// 文档加载完毕后的操作

$(document).ready(function(){

var tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0); // 创建树形结构对象

tree.setSkin('dhx_skyblue'); // 设置皮肤样式

tree.setImagePath("./tree/imgs/"); // 设置图片路径

tree.setStdImages("folderClosed.gif", "folderOpen.gif", "folderClosed.gif"); // 设置节点图片

tree.enableDragAndDrop(1); // 允许拖拽功能

tree.enableTreeLines(false); // 不显示树线

tree.setOnRightClickHandler(function(id){ // 设置右键点击事件，选中并点击的节点ID保存在mm中

tree.selectItem(id);

$("mm").val(id);

});

// 设置拖拽处理函数，当拖拽目录到终点目录时，将终点目录作为起点目录的父目录。 具体实现细节略...

您是否希望将节点移至另一位置？这是我们的询问。眼前您看到的这棵树状结构，我们即将移动其中一个节点，将它放置到您指定的位置。您选择的节点标签为：节点名称一（node name one）。您希望将其移至的位置节点标签为：节点名称二（node name two）。对于您的操作，我们正在等待您的确认。一旦您点击确认按钮，我们将启动一个动作：通过PHP脚本将节点移动请求发送到服务器进行处理。这个过程会在后台默默执行，我们不需要页面刷新或者跳转。一旦服务器处理完毕，会返回一些提示信息（tips）。这些信息可能包括移动是否成功，或者可能遇到的一些状况反馈等。在您阅读这些信息后，如果您希望关闭提示框并刷新页面以获取的树状结构视图，请点击确认按钮。请注意，即使您关闭提示框，页面的刷新也会自动进行，确保您看到的是的节点位置。无论结果如何，我们都会通过友好的方式向您反馈，让您感到满意并微笑面对。在确认移动操作后，我们期待您继续我们的树状结构的其他功能。在此刻，我们等待着您的决策。您的选择将立即影响节点的位置。让我们共同见证这一刻的到来吧！让我们继续合作，共同完善这个树状结构的功能与体验。您选择的操作已被处理并生效。此刻，我们的页面渲染完成。这就是我们的“body”渲染完成的状态。请享受您在这个树状结构中的旅程。