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

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

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

思路:

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

参考资料：layer Api

代码：

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));
    	
      },

点击后出来的效果：

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