BootStrap-table-contextmenu使用過程的一些總結

阿新 • • 發佈：2019-01-21

1 引入bootstrap-table-contextmenu

<script src="bootstrap-table-contextmenu.js"></script>

2 按照官方例子，使用如下

<body>
    <div class="container">
      <div class="row">
        <table id='grid'>
            <thead>
              <tr>
                <th data-field='itemid'>Item ID</th>
                <th data-field='name'>Name</th>
                <th data-field='price'>Price</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>1</td><td>ABC</td><td>$1.00</td></tr>
              <tr><td>2</td><td>DEF</td><td>$2.00</td></tr>
              <tr><td>3</td><td>GHI</td><td>$3.00</td></tr>
              <tr><td>4</td><td>XYZ</td><td>$4.00</td></tr>
            </tbody>
        </table>
      </div>  
    </div>
  
    <!-- context menu -->
    <ul id="context-menu" class="dropdown-menu">
        <li data-item="edit"><a>Edit</a></li>
        <li data-item="delete"><a>Delete</a></li>
        <li data-item="action1"><a>Action Here</a></li>
        <li data-item="action2"><a>And Action Here</a></li>
    </ul>  

    <script>
	  $(function() {
		  $('#grid').bootstrapTable({
			  contextMenu: '#context-menu',
			  onContextMenuItem: function(row, $el){
				  if($el.data("item") == "edit"){
					  alert(row.itemid);
				  }
			  }
		  });
	  });
    </script>
</body>

注意其中如果<table>標籤如果有data-toggle="table"屬性，則右鍵選單不會生效。

3 動態載入table內容，如果是<table>有data-toggle="table"屬性,則使用如下指令碼

$(function() {
      var tableData = [];


for (var i = 0; i <4; i++) {
var mes = {};
mes['itemid'] = i;
mes['name'] ='zhsh';

mes['price'] = '1$';

tableData.push(mes);
}


console.log(tableData);



$('#grid').bootstrapTable('refreshOptions', {
data: tableData
});


 
  });

可以動態新增表格內容，如果去掉data-toggle="table"屬性,則動態內容又新增不上。如何解決又要動態新增表格內容，又需要右鍵選單呢，方案如下

去掉data-toggle="table"屬性，先執行新增右鍵的指令碼，再執行動態新增內容的指令碼

 $(function() {
      var tableData = [];


for (var i = 0; i <4; i++) {
var mes = {};
mes['itemid'] = i;
mes['name'] ='zhsh';

mes['price'] = '1$';

tableData.push(mes);
}


console.log(tableData);

 $('#grid').bootstrapTable({
  contextMenu: '#context-menu',
  onContextMenuItem: function(row, $el){
  if($el.data("item") == "edit"){
  alert(row.itemid);
  }
  }
  });

$('#grid').bootstrapTable('refreshOptions', {
data: tableData
});



 
  });

嘗試過使用bootstrap-contextmenu來實現，因為我需要實現表格行的複製貼上功能，當使bootstrap-contextmenu時點選複製後，選單消失，點選粘貼後，表格追加一行，然而選單並未

消失，使用bootstrap-table-contextmenu無此情況

BootStrap-table-contextmenu使用過程的一些總結

1 引入bootstrap-table-contextmenu <script src="bootstrap-table-contextmenu.js"></script> 2 按照官方例子，使用如下 <body> <di

bootstrap Table API和一些簡單使用方法

type 字段名 specified 匹配請求方式 css 情況 ebo 空字符官網： http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 後端分頁問題：後端返回”rows”、“”total，這樣才能

Bootstrap table的一些簡單使用總結

lin arr 頁碼 .cn 客戶端 ide example 一個表 ret 在GitHub上Bootstrap-table的源碼地址是：https://github.com/wenzhixin/bootstrap-table Bootstrap-table的文檔地址：ht

bootstrap-table的一些基本使用及表內編輯的實現

視圖 time lis toggle ber true 請求 cache ng- 最近工作需要接觸了bootstrap-table 所以研究了一下，並做了筆記，紅色位置要特別註意前端主要使用了 jquery bootstrap-table bootstrap-edit

基於Metronic的Bootstrap開發框架經驗總結（18）-- 在代碼生成工具Database2Sharp中集成對Bootstrap-table插件的分頁及排序支持

關註基礎表頭數據 database 一定的處理 tree的使用適合在我們開發系統界面，包括Web和Winform的都一樣，主要的界面就是列表展示主界面，編輯查看界面，以及一些輔助性的如導入界面，選擇界面等，其中列表展示主界面是綜合性的數據展示界面，一般往往需要對

bootstrap-table的一些參數配置

選擇條紋 loader num 匹配 left ins side repo bootstrap-table的一些配置參數[html] view plain copy$(‘#reportTable‘).bootstrapTable({ method: ‘post‘,

bootstrap Table的一些小操作

cnblogs warning 在一起 classes 服務端 andro 設置 blog 根據 function HQCreatTable(ob) { var option = { cache: false,//是否使用緩存，默認為true，所以

Bootstrap-Table 總結

Bootstrap-Table 總結 jQuery Java Bootstrap-Table JS檔案傳參：直接將需要的引數置於 queryParams 方法中，例如 line:formData 注意： queryParams 中的 queryStr 是獲取文字框的值，在表格載入完後，

SparkShuffle的分類和執行過程的一些總結

什麼是Spark Shuffle? reduceByKey會將上一個RDD中的每一個key對應的所有value聚合成一個value，然後生成一個新的RDD，元素型別是<key,value>對的形式，這樣每一個key對應一個聚合起來的value。在聚合之前，相同的key可能在

bootstrap使用中的一些問題以及解決過程

bootstrap是一個不錯的前端框架。這裡寫一下使用中遇到過的幾點問題。 1.bootstrap的模態框modal的問題。有時候會出現彈出模態框的時候遮罩把模態框遮住的情況。出現這個問題的原因，多半是模態框的html程式碼放置位置不對。看官方文件。說明如下：

bootstrap-table使用總結

1、下載： https://github.com/wenzhixin/bootstrap-table 2、文件： http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 3、引用： <link rel

基於Metronic的Bootstrap開發框架經驗總結（16）-- 使用外掛bootstrap-table實現表格記錄的查詢、分頁、排序等處理

在業務系統開發中，對錶格記錄的查詢、分頁、排序等處理是非常常見的，在Web開發中，可以採用很多功能強大的外掛來滿足要求，且能極大的提高開發效率，本隨筆介紹這個bootstrap-table是一款非常有名的開源表格外掛，在很多專案中廣泛的應用。Bootstrap-table外掛提供了非常豐富的屬性設定，可以實現

基於Metronic的Bootstrap開發框架經驗總結（18）-- 在程式碼生成工具Database2Sharp中整合對Bootstrap-table外掛的分頁及排序支援

在我們開發系統介面，包括Web和Winform的都一樣，主要的介面就是列表展示主介面，編輯檢視介面，以及一些輔助性的如匯入介面，選擇介面等，其中列表展示主介面是綜合性的資料展示介面，一般往往需要對記錄進行合理的分頁，整合各種增刪改查的按鈕等功能。隨著開發專案的需求變化，對資料記錄分頁展示、排序等功能都是常態的

js元件-bootstrap table 客戶端分頁與搜尋總結

先上程式碼以及效果圖ｈｔｍｌ程式碼 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PU

bootstrap-table的一些配置引數例子

bootstrap-table的一些配置引數 $('#reportTable').bootstrapTable({ method: 'post', url: '/qStock/AjaxPage', dataType: "json", striped: tru

bootstrap table 實現固定懸浮table 表頭並可以水平滾動

app 實現 question get net width class pan eight 在開發項目中，需要將表格頭部固定，而且表格大多數情況下是會水平滾動的。項目的css框架是bootstrap 3，故也可以叫做bootstrap table。需要實現的是：表格頭部

Vuejs的一些總結

輸入註意操作 -1 absolut code ack selected translate 1.Vuejs組件 vuejs構建組件使用 1 Vue.component(‘componentName‘,{ /*component*/ })；這裏註

關於ASP.NET MVC的權限認證的一些總結

filter mode allow 檢查 art 權限奇怪 dha 可執行最近在學ASP.NET MVC的權限認證的一些東西，上網搜索了一陣，發現網上的方法大多數是以下幾類：一、FormsAuthentication.SetAuthCookie(admin.Name,

Ajax與JSON的一些總結

image mage 也說 emp 郵件 rom clas lis using 分享到... 復制網址郵件騰訊微博百度搜藏人人網開心網一鍵分享豆瓣微博微信QQ好友QQ空間印象筆記領英飛信查看更多(96) JiaThis

bootstrap table

set type too boot select card enc 點擊 read $(document).ready(function(){ var queryParams = function (params) { var temp = {

BootStrap-table-contextmenu使用過程的一些總結

相關推薦