使用contextMenu插件实现Bootstrap table弹出右键菜单

使用contextMenu插件可以实现在Bootstrap table中实现右键菜单的弹出。具体的实现过程可以分为以下几个步骤：

1. 引入必要的静态文件

在使用contextMenu插件之前，需要先引入必要的静态文件，包括：

• jQuery.js
• Bootstrap.css
• Bootstrap.js
• jquery.contextMenu.js
• jquery.contextMenu.css

其中，jquery.contextMenu.js和jquery.contextMenu.css是contextMenu插件的核心文件。

1. 编写Html代码

在Html代码中，需要编写一个Bootstrap table，并在table中添加一个名为“context-menu”的class：

<table id="table" class="table table-striped table-bordered table-hover context-menu">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

1. 初始化contextMenu插件

在Javascript代码中，需要初始化contextMenu插件，指定弹出菜单的选项和处理函数。下面是一个简单的示例代码：

$(document).ready(function(){
  $('.context-menu').contextMenu({
    selector: 'tr',
    callback: function(key, options) {
      var id = $(this).find('td:eq(0)').text();
      if(key == 'edit') {
        // 执行编辑操作
      } else if(key == 'delete') {
        // 执行删除操作
      }
    },
    items: {
      "edit": {name: "编辑", icon: "edit"},
      "delete": {name: "删除", icon: "delete"}
    }
  });
});

在这个示例中，我们指定了一个选择器，也就是“tr”，表示当用户右键点击一个tr元素的时候，弹出菜单。我们还自定义了两个菜单项，分别为“编辑”和“删除”，并指定了它们的图标和处理函数。在处理函数中，我们可以通过find方法获取当前行的id，并根据菜单项的不同执行不同的操作。

1. 添加样式

在CSS代码中，需要添加样式来美化弹出菜单的样式。下面是示例代码：

.context-menu li div {
  padding: 5px 10px;
}

.context-menu li:hover div {
  background-color: #428bca;
  color: #fff;
}

.context-menu li.separator {
  border-top: 1px solid #ddd;
}

.context-menu li.disabled a {
  color: #ddd;
  cursor: default;
}

.context-menu li.disabled:hover div {
  background-color: transparent;
  color: #999;
}

通过添加以上样式，我们可以为弹出菜单添加一些基本的样式，包括padding、hover和disabled等效果。

示例

下面是两个示例，分别演示了如何添加一个“添加”菜单项和如何在弹出菜单中嵌套子菜单。

1. 添加菜单项

在Javascript代码中，添加一个名为“add”的菜单项，并在处理函数中执行添加操作：

$(document).ready(function(){
  $('.context-menu').contextMenu({
    selector: 'tr',
    callback: function(key, options) {
      var id = $(this).find('td:eq(0)').text();
      if(key == 'edit') {
        // 执行编辑操作
      } else if(key == 'delete') {
        // 执行删除操作
      } else if(key == 'add') {
        // 执行添加操作
      }
    },
    items: {
      "add": {name: "添加", icon: "add"}
      "edit": {name: "编辑", icon: "edit"},
      "delete": {name: "删除", icon: "delete"}    
    }
  });
});

1. 添加子菜单

在items中添加一个子菜单，演示如何在弹出菜单中添加子菜单：

$(document).ready(function(){
  $('.context-menu').contextMenu({
    selector: 'tr',
    callback: function(key, options) {
      var id = $(this).find('td:eq(0)').text();
      if(key == 'edit') {
        // 执行编辑操作
      } else if(key == 'delete') {
        // 执行删除操作
      } else if(key == 'add') {
        // 执行添加操作
      }
    },
    items: {
      "add": {name: "添加", icon: "add", items: {
        "add-item-1": {name: "添加项1", icon: "add"},
        "add-item-2": {name: "添加项2", icon: "add"}
      }},
      "edit": {name: "编辑", icon: "edit"},
      "delete": {name: "删除", icon: "delete"}    
    }
  });
});

在这个示例中，我们添加了一个名为“add”的菜单项，并在它的items中创建了两个子菜单，分别为“添加项1”和“添加项2”。通过这种方式，我们可以实现更加复杂、灵活的弹出菜单效果。