Bootstrap Table 行内编辑

Bootstrap Table 行内编辑（无弹窗，支持文本、下拉框，直接保存）

最近用到了bootstrap table的行内编辑，自带的编辑功能会弹出一个对话框，操作起来很不顺手，参照了 bootstrapTable 实现指定字段行内编辑，无弹窗，自动保存，加上自己改良了改了一部分，实现双击修改列表中内容，实现行内编辑。
效果图：

首先定义了一个全局变量options，初始化函数里设置变量值，即需要行内编辑的字段和编辑类型（目前只有text和select两种）

$(function () {
//行内编辑的单元格及编辑方式 text:文本 select:列表 方式为select时，写明列表值域
	options = [{editField : "RES_TYPE_NAME",
				editType : "select",
				editRange : "RES_TYPE"},
			   {editField : "RES_REMARK",
				editType : "text",
				editRange : ""}];
});

在bootstrap table初始化时，js代码$("#bootstraptable").bootstrapTable{}中，设定双击单元格事件（可以根据需求，改成单击单元格事件）

onDblClickCell : function(field,value,row,$element){
        	//避免重复编辑，如果inputCell已经存在，不做处理
        	if($("#inputCell").length>0){
        		return null;
        	}
        	var upIndex = $element[0].parentElement.rowIndex -1;
        	//获取单元格宽度，不然样式有点怪
        	var witdh = $element[0].clientWidth-16;
        	//循环字段
        	options.forEach(function(option){
        		if(field == option.editField){
        			//text类型直接添加一个input，然后绑定blur事件，焦点离开时触发保存操作
        			if("text" == option.editType){
        				$element[0].innerHTML="<input id='inputCell' type='text' name='inputCell' style ='width:"+witdh+"px;padding:0;' value='"+value+"'>";
        		        $("#inputCell").focus();
        		        $("#inputCell").blur(function(){
        		            var newValue = $("#inputCell").val();
        		            row[field] = newValue;
        		            $(this).remove();
        		            objTable.bootstrapTable('updateCell', {
        		                index: upIndex,
        		                field:field,
        		                value: newValue
        		            });
        		            //保存数据
        		            saveCellChange(row, field);
        		        });
        			}
        			//select类型拼接了一个select块（尝试使用combobox，但绑定不了blur事件，很苦恼，只能退而求其次），然后绑定blur事件，焦点离开时触发保存操作
        			else if("select" == option.editType){
        				var selectHtml = "<select id='inputCell' style ='width:"+witdh+"px'>";
        				var options = getOptions(option.editRange,value);
        				selectHtml = selectHtml + options + "</select>";
        				$element[0].innerHTML = selectHtml;
        		        $("#inputCell").focus();
        		        $("#inputCell").blur(function(){
        		        	var newValue = $('#inputCell option:selected').text();
        		        	row[field] = newValue;
        		            $(this).remove();
        		            objTable.bootstrapTable('updateCell', {
        		                index: upIndex,
        		                field:field,
        		                value: newValue
        		            });
        		            //保存数据
        		            saveCellChange(row, field);
        		        })
        			}
        	    }
        	})
        }

获取options的函数

function getOptions(range, defaultValue){
	var rangeList = "";
	var rangeResult = callHttpService("test", "getRangelistByCode", range);
	for(var i=0;i<rangeResult.length;i++){
		if(defaultValue == rangeResult[i].NAME){
			rangeList += "<option value='"+rangeResult[i].CODE+"' selected='selected'>"+rangeResult[i].NAME+"</option>";
		}else{
			rangeList += "<option value='"+rangeResult[i].CODE+"'>"+rangeResult.NAME+"</option>";
		}	
	}
	return rangeList;
}

保存数据函数

//这里只是随便写了个alert，验证进入到保存数据的操作中
function saveCellChange(row, field){
	alert(row[field]);
}