jQuery ligerUI tree右键编辑

Question

我想右键的时候把“新机构”编程可编辑的。我用的是jQuery ligerUI的tree。请大神告诉下。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要实现jQuery LigerUI Tree 的右键菜单中“新机构”的编辑功能，您需要使用 jQuery UI 的 contextMenu 插件。以下是如何在右键菜单中添加“新机构”选项的方法：

首先，在您的 HTML 文件中引入 jQuery UI 和 jQuery UI 的 contextMenu 插件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

接下来，创建一个 JavaScript 文件并编写代码来处理右键菜单事件：

$(document).ready(function() {
  // 获取 jQuery UI contextMenu 按钮元素
  var $contextMenu = $('#your-context-menu-id');

  // 在右键点击时触发一个新的弹出菜单
  $contextMenu.contextmenu(function(event) {
    event.preventDefault(); // 阻止默认行为（例如滚动）
    var data = {item: 'new'}; // 将数据存储到参数对象中

    // 创建一个新的弹出菜单
    var menu = $.contextMenu(data, function(event, index) {
      // 当用户选择“新机构”时，执行相应操作
      if (index === 0) {
        // 示例：打开一个新的窗口或弹窗以允许用户输入新机构名称
        window.open('http://example.com/new-institution', '_blank');
      }
    });

    // 设置上下文菜单的位置和样式
    menu.css({
      top: event.pageY - 50,
      left: event.pageX + 50
    });

    // 显示上下文菜单
    menu.show();
  });
});

确保将 '#your-context-menu-id' 替换为您希望显示的上下文菜单的 ID。

在这个示例中，当用户右键点击树中的某个节点时，会触发一个事件。这个事件阻止了浏览器的默认行为，并且提供了额外的上下文菜单供用户选择。如果用户选择了 "新机构"，则会在一个新的窗口中打开一个新的弹窗，用于让用户输入新机构名称。