脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap table右键功能

Bootstrap table右键功能实现方法

 更新时间：2017年02月20日 09:12:53   作者：lanyang123456  
这篇文章主要为大家详细介绍了Bootstrap table右键功能的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近遇到有一个需求，需要在Bootstrap table上使用右键。网上搜了半天没有找到，最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstrap-table/issues/241 )。

本文介绍使用contextMenu插件实现Bootstrap table右键功能。

代码(test.html)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap-table.css" rel="external nofollow" >
<link href="libs/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet"/>


<script src="libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table-zh-CN.js"></script>
<script src="libs/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>

</head>

<body>

<table id="item_table"></table>

<script>

$('#item_table').bootstrapTable({
 columns: [{
 field: 'id',
 title: 'Item ID'
 }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }],
 data: [{
 id: 1,
 name: 'Item 1',
 price: '$1'
 }, {
 id: 2,
 name: 'Item 2',
 price: '$2'
 }]
});


$.contextMenu({
 // define which elements trigger this menu
 selector: "#item_table td",
 // define the elements of the menu
 items: {
 foo: {name: "Foo", callback: function(key, opt){ alert("Foo!"); }},
 bar: {name: "Bar", callback: function(key, opt){ alert("Bar!") }}
 }
 // there's more, have a look at the demos and docs...
});

</script>

</body>
</html>

效果图：

关于contextMenu的使用，可以参考网页中右键功能的实现— contextMenu的使用 。

关于Bootstrap table的使用，可以参考官方文档Bootstrap table。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 使用webpack将ES6转化ES5的实现方法

    使用webpack将ES6转化ES5的实现方法

    这篇文章主要介绍了使用webpack将ES6转化ES5的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • js图片放大镜效果实现方法详解

    js图片放大镜效果实现方法详解

    这篇文章主要为大家详细介绍了js图片放大镜效果的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 跟我学习javascript的定时器

    跟我学习javascript的定时器

    跟我学习javascript的定时器，告诉大家具体的使用方法，并向大家提出了一个消息要求，制作一个定时器，有没有朋友感兴趣，挑战一下
    2015-11-11
  • javascript history对象详解

    javascript history对象详解

    本文主要介绍了javascript history对象的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • JS抛物线动画实例制作

    JS抛物线动画实例制作

    本篇文章给大家详细分析了JS抛物线动画制作过程以及相关的代码实例分享，有兴趣的朋友参考下。
    2018-02-02
  • js拦截alert对话框另类应用

    js拦截alert对话框另类应用

    alert对话框的使用给用户带来了很多的方便，而有些时候不希望让它存在，接下来介绍如何使用js拦截alert对话框,感兴趣的朋友可以了解下
    2013-01-01
  • Javascript直接定义对象实例[

    Javascript直接定义对象实例[

    Javascript直接定义对象实例[...
    2006-12-12
  • js css3实现图片拖拽效果

    js css3实现图片拖拽效果

    这篇文章主要为大家详细介绍了js css3实现图片拖拽效果，注释非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • uniapp实现审批流程的具体操作步骤

    uniapp实现审批流程的具体操作步骤

    这篇文章主要介绍了uniapp实现审批流程的具体操作方法,实现思路大概是需要要定义一个变量,记录当前激活的步骤,通过数组的长度来循环数据,如果有就采用3元一次进行选择,具体实现步骤跟随小编一起看看吧
    2024-03-03
  • JS 创建对象的模式实例小结

    JS 创建对象的模式实例小结

    这篇文章主要介绍了JS 创建对象的模式,结合实例形式总结分析了JS 创建对象的各种常用模式,包括工厂模式、构造函数模式、原型模式、组合构造和原型模式、动态原型模式、寄生构造函数模式、稳妥构造模式等,需要的朋友可以参考下
    2020-04-04

最新评论