脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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。

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

您可能感兴趣的文章:

相关文章

  • JavaScript中forEach遍历数组举例详解

    JavaScript中forEach遍历数组举例详解

    许多小伙伴对forEach语句应该再熟悉不过了,无论是前端遍历渲染还是js中的逻辑处理,这篇文章主要介绍了JavaScript中forEach方法的使用方式、优缺点以及实际应用场景,帮助开发者更好地掌握这一常见的数组遍历技术,需要的朋友可以参考下
    2025-03-03
  • JavaScript探测CSS动画是否已经完成的方法

    JavaScript探测CSS动画是否已经完成的方法

    这篇文章主要为大家详细介绍了JavaScript探测CSS动画是否已经完成的方法，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript数据结构之链表的实现

    JavaScript数据结构之链表的实现

    链表是一种常见的数据结构。它是动态地进行存储分配的一种结构。本文主要介绍JavaScript数据结构中链表的实现，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 用Fundebug插件记录网络请求异常的方法

    用Fundebug插件记录网络请求异常的方法

    这篇文章主要介绍了用Fundebug插件记录网络请求异常的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 微信小程序实现图片上传

    微信小程序实现图片上传

    这篇文章主要为大家详细介绍了微信小程序实现图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 在小程序中推送模板消息的实现方法

    在小程序中推送模板消息的实现方法

    这篇文章主要介绍了在小程序中推送模板消息的实现方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 微信小程序调用PHP后台接口 解析纯html文本

    微信小程序调用PHP后台接口 解析纯html文本

    这篇文章主要为大家详细介绍了微信小程序调用PHP后台接口，解析纯html文本的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • javascript闭包的理解

    javascript闭包的理解

    这篇文章主要介绍了js闭包的相关知识，闭包是Javascript的一个难点，但也是一个很重要的知识点,需要的朋友可以参考下
    2015-04-04
  • javascript实现密码验证

    javascript实现密码验证

    这篇文章主要介绍了javascript密码验证的实现方法，过程很简单具有一定的参考价值，适合初学者学习研究，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS实现的加减乘除四则运算计算器示例

    JS实现的加减乘除四则运算计算器示例

    这篇文章主要介绍了JS实现的加减乘除四则运算计算器,涉及javascript事件响应及数学运算相关操作技巧,需要的朋友可以参考下
    2017-08-08

最新评论