使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單
如今Bootstrap這個(gè)前端框架已被許多人接受并應(yīng)用在不同的項(xiàng)目中,其中“開發(fā)高效,設(shè)備兼容”的特點(diǎn)表現(xiàn)得非常明顯。再加上它默認(rèn)的美觀的UI組件,簡直就是很多前端的大愛啊?。。?今天在這里跟大家分享Bootstrap table彈出右鍵菜單的實(shí)現(xiàn)方法。
最近遇到有一個(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。
以上所述是小編給大家介紹的使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
bootstrap3使用bootstrap datetimepicker日期插件
這篇文章主要為大家詳細(xì)介紹了bootstrap3中使用bootstrap datetimepicker日期插件的用法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05javascript的創(chuàng)建多行字符串的7種方法
多行字符串的作用是用來提高源代碼的可讀性.尤其是當(dāng)你處理預(yù)定義好的較長字符串時(shí),把這種字符串分成多行書寫更有助于提高代碼的可讀性和可維護(hù)性.在一些語言中,多行字符串還可以用來做代碼注釋. 大部分動態(tài)腳本語言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?2014-04-04JS庫particles.js創(chuàng)建超炫背景粒子插件(附源碼下載)
particles.js用于創(chuàng)建粒子的輕量級 JavaScript 庫。使用方法非常簡單,代碼也很容易實(shí)現(xiàn),下面通過本文給大家分享JS庫particles.js創(chuàng)建超炫背景粒子插件附源碼下載,需要的朋友參考下吧2017-09-09Javascript實(shí)現(xiàn)拖拽排序的代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)拖拽排序的代碼,本文在vue運(yùn)行環(huán)境下給大家演示下效果圖,對js拖拽排序?qū)嵗a感興趣的朋友跟隨小編一起看看吧2022-09-09javascript與PHP動態(tài)往類中添加方法對比
這篇文章主要介紹了JAVASCRIPT與PHP動態(tài)往類中添加方法對比的相關(guān)資料,需要的朋友可以參考下2018-03-03javascript獲取select值的方法完整實(shí)例
這篇文章主要介紹了javascript獲取select值的方法,結(jié)合完整實(shí)例形式分析了javascript動態(tài)遍歷與操作頁面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-06-06