BootStrap-table-contextmenu使用过程的一些总结

最新推荐文章于 2024-05-10 09:38:03 发布

程序员猪猪侠

最新推荐文章于 2024-05-10 09:38:03 发布

阅读量4.3k

点赞数

分类专栏： html 文章标签： bootstrap table cont

本文链接：https://blog.csdn.net/xiaozhu2hao/article/details/77244741

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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无此情况

程序员猪猪侠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录