bootstrapTable行内动态编辑行中某列字段数据（优化版：无需弹框，直接在行内更新）

Love The Way You Lie 2022-05-18 01:41 1267阅读 0赞

之前一篇博里面写的是 行内动态编辑列数据，现在只需要双击后在行内即可完成编辑（还是基于bootstraptable框架）。

关键方法：updateCell（之前只用过updaterow）

代码如下：

onDblClickCell : function(field,value,row,$element){
     			if(!isNotNull(row.qty2)){
     	 			if(field=='declQty'||field=='qty1'){
     	 				$element[0].innerHTML="<input id='inputCell' type='text' name='inputCell' value='"+value+"'>";
     	 				$("#inputCell").focus();
     	 				$("#inputCell").blur(function(){
     	 					var newValue = $("#inputCell").val();
     	 	 				row[field] = newValue;
     	 	 				$(this).remove();
     	 	 				$('#cancelBillListTable').bootstrapTable('updateCell', {//
     					        index: updateGoodsIndex,
     					        field:field,
     					        value: newValue
     					   });
     	 	 				updateExbEnt();
     	 	 			});
     	 			}				
     			}else{
     			if(field=='declQty'||field=='qty1'||field=='qty2'){
     				$element[0].innerHTML="<input id='inputCell' type='text' name='inputCell' value='"+value+"'>";
     				$("#inputCell").focus();
     				$("#inputCell").blur(function(){
     					var newValue = $("#inputCell").val();
     	 				row[field] = newValue;
     	 				$(this).remove();
     	 				$('#cancelBillListTable').bootstrapTable('updateCell', {//拼完一条提运单对象 就在列表上添加一条数据
    				        index: updateGoodsIndex,
    				        field:field,
    				        value: newValue
    				   });
     	 				updateExbEnt();
     	 			});
     			}
     			}
     			
     		},