bootstrapTable行内动态编辑行中某列字段数据

谁践踏了优雅 2022-05-20 03:41 1270阅读 0赞

今天开发者遇到了一个需求：在一个table数据中，点击某行的某一个列数据就行修改该行该字段的属性值（另一篇博文有优化方法）。

前言：在网上搜索了一番，使用[x-editable组件][x-editable]去实现这个功能，在下载了一些js文件后，一番捣鼓搞不定（如需要下面js留下地址送你），后来使用自己的方法搞定；下面是使用[x-editable][]组件出来的效果（效果看起来很不错）；

![70][]![70 1][]

思路:

在查看bootstraptable API 后，找到了onclickCell方法，此时我想到之前用过updateRow去更新行数据（前提是在bootstraptable的环境前提下），通过onclickCell获取属性，然后通过updateRow去更新这条数据达到动态修改字段目的。

参考资料：layer Api

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:middle;">onClickCell</td> 
   <td style="vertical-align:middle;">click-cell.bs.table</td> 
   <td style="vertical-align:middle;">field, value, row, $element</td> 
   <td style="vertical-align:middle;">当单击某一格，就会触发该事件，所需参数如下：&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - field：此格所在列的字段名&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - value：此格的数据&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - $element：此行的此列，就是此格（td）</td> 
  </tr> 
 </tbody> 
</table>

代码：

onClickCell :function(field, value, row, $element){
        	  console.log(value);
        	  $("#editId").val(value);
        	    var btns = {
        	            btn : ["确定","取消"],
        	            yes : function(index, layero) {//保存
        	            	var upIndex = $element.data('index');
        	            	row.field=$("#editId").val();
        	        		$('#cancelBillListTable').bootstrapTable('updateRow', {
        	    		        index: upIndex,
        	    		        row: row
        	    		    });
        	                layer.close(index);
        	            
        	            },
        	            btn2 : function(index, layero) {//清空
        	            
        	            }
        	        };
        	        layer.open($.extend({
        	            type : 1,
        	            shadeClose : false,
        	            area : [ '350px', '200px' ],
        	            title : "修改字段属性",
        	            maxmin: true,
        	            cancel : function(){
        	                return true;
        	            },
        	            end: function(index){
        	            	return true;
        	            },
        	            shade : 0.5,
        	            scrollbar : false,
        	            btnAlign : 'c', // 居中
        	            content : $("#updateDiv")
        	        },btns));
        	
          },

点击后出来的效果：

![70 2][]

输入你修改后的值，传递到 row中，调用updataRow方法即可（此处使用的是layer控件的弹出层layer.prompt，上述代码中的是使用的layer.open）；

[x-editable]: http://www.cnblogs.com/landeanfen/p/5821192.html#_label0
[70]: https://img-blog.csdn.net/20180711212830829?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzAyMDk3Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220520/aa94b351c7254fa89355d1fc55aba8bc.png
[70 2]: /images/20220520/fe1dac25614f4821bb4f17c2ecd79cb2.png