Bootstrap table右鍵功能實(shí)現(xiàn)方法

更新時(shí)間：2017年02月20日 09:12:53 作者：lanyang123456

這篇文章主要為大家詳細(xì)介紹了Bootstrap table右鍵功能的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近遇到有一個(gè)需求，需要在Bootstrap table上使用右鍵。網(wǎng)上搜了半天沒有找到，最后發(fā)現(xiàn)Bootstrap table不支持右鍵(官方文檔給出的答案 https://github.com/wenzhixin/bootstrap-table/issues/241 )。

本文介紹使用contextMenu插件實(shí)現(xiàn)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>

效果圖：

關(guān)于contextMenu的使用，可以參考網(wǎng)頁(yè)中右鍵功能的實(shí)現(xiàn)— contextMenu的使用。

關(guān)于Bootstrap table的使用，可以參考官方文檔Bootstrap table。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript中forEach遍歷數(shù)組舉例詳解
許多小伙伴對(duì)forEach語(yǔ)句應(yīng)該再熟悉不過(guò)了,無(wú)論是前端遍歷渲染還是js中的邏輯處理,這篇文章主要介紹了JavaScript中forEach方法的使用方式、優(yōu)缺點(diǎn)以及實(shí)際應(yīng)用場(chǎng)景,幫助開發(fā)者更好地掌握這一常見的數(shù)組遍歷技術(shù),需要的朋友可以參考下
2025-03-03
JavaScript探測(cè)CSS動(dòng)畫是否已經(jīng)完成的方法
這篇文章主要為大家詳細(xì)介紹了JavaScript探測(cè)CSS動(dòng)畫是否已經(jīng)完成的方法，感興趣的小伙伴們可以參考一下
2016-08-08
JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實(shí)現(xiàn)
鏈表是一種常見的數(shù)據(jù)結(jié)構(gòu)。它是動(dòng)態(tài)地進(jìn)行存儲(chǔ)分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實(shí)現(xiàn)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法
這篇文章主要介紹了用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
微信小程序?qū)崿F(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片上傳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
在小程序中推送模板消息的實(shí)現(xiàn)方法
這篇文章主要介紹了在小程序中推送模板消息的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
微信小程序調(diào)用PHP后臺(tái)接口解析純html文本
這篇文章主要為大家詳細(xì)介紹了微信小程序調(diào)用PHP后臺(tái)接口，解析純html文本的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
javascript閉包的理解
這篇文章主要介紹了js閉包的相關(guān)知識(shí)，閉包是Javascript的一個(gè)難點(diǎn)，但也是一個(gè)很重要的知識(shí)點(diǎn),需要的朋友可以參考下
2015-04-04
javascript實(shí)現(xiàn)密碼驗(yàn)證
這篇文章主要介紹了javascript密碼驗(yàn)證的實(shí)現(xiàn)方法，過(guò)程很簡(jiǎn)單具有一定的參考價(jià)值，適合初學(xué)者學(xué)習(xí)研究，感興趣的小伙伴們可以參考一下
2015-11-11
JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器示例
這篇文章主要介紹了JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器,涉及javascript事件響應(yīng)及數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2017-08-08