快捷導(dǎo)航

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)頁中右鍵功能的實(shí)現(xiàn)— contextMenu的使用。

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

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

您可能感興趣的文章:

相關(guān)文章

使用webpack將ES6轉(zhuǎn)化ES5的實(shí)現(xiàn)方法
這篇文章主要介紹了使用webpack將ES6轉(zhuǎn)化ES5的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
js圖片放大鏡效果實(shí)現(xiàn)方法詳解
這篇文章主要為大家詳細(xì)介紹了js圖片放大鏡效果的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
跟我學(xué)習(xí)javascript的定時(shí)器
跟我學(xué)習(xí)javascript的定時(shí)器，告訴大家具體的使用方法，并向大家提出了一個(gè)消息要求，制作一個(gè)定時(shí)器，有沒有朋友感興趣，挑戰(zhàn)一下
2015-11-11
javascript history對(duì)象詳解
本文主要介紹了javascript history對(duì)象的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
JS拋物線動(dòng)畫實(shí)例制作
本篇文章給大家詳細(xì)分析了JS拋物線動(dòng)畫制作過程以及相關(guān)的代碼實(shí)例分享，有興趣的朋友參考下。
2018-02-02
js攔截alert對(duì)話框另類應(yīng)用
alert對(duì)話框的使用給用戶帶來了很多的方便，而有些時(shí)候不希望讓它存在，接下來介紹如何使用js攔截alert對(duì)話框,感興趣的朋友可以了解下
2013-01-01
Javascript直接定義對(duì)象實(shí)例[
Javascript直接定義對(duì)象實(shí)例[...
2006-12-12
js css3實(shí)現(xiàn)圖片拖拽效果
這篇文章主要為大家詳細(xì)介紹了js css3實(shí)現(xiàn)圖片拖拽效果，注釋非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
uniapp實(shí)現(xiàn)審批流程的具體操作步驟
這篇文章主要介紹了uniapp實(shí)現(xiàn)審批流程的具體操作方法,實(shí)現(xiàn)思路大概是需要要定義一個(gè)變量,記錄當(dāng)前激活的步驟,通過數(shù)組的長(zhǎng)度來循環(huán)數(shù)據(jù),如果有就采用3元一次進(jìn)行選擇,具體實(shí)現(xiàn)步驟跟隨小編一起看看吧
2024-03-03
JS 創(chuàng)建對(duì)象的模式實(shí)例小結(jié)
這篇文章主要介紹了JS 創(chuàng)建對(duì)象的模式,結(jié)合實(shí)例形式總結(jié)分析了JS 創(chuàng)建對(duì)象的各種常用模式,包括工廠模式、構(gòu)造函數(shù)模式、原型模式、組合構(gòu)造和原型模式、動(dòng)態(tài)原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造模式等,需要的朋友可以參考下
2020-04-04