今天開發者遇到了一個需求：在一個table資料中，點選某行的某一個列資料就行修改該行該欄位的屬性值（另一篇博文有優化方法）。

前言：在網上搜索了一番，使用x-editable元件去實現這個功能，在下載了一些js檔案後，一番搗鼓搞不定（如需要下面js留下地址送你），後來使用自己的方法搞定；下面是使用x-editable元件出來的效果（效果看起來很不錯）；

思路:

在檢視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）；