效果如下:
点击输入框可修改输入框的值,修改完后点击保存
注意:没有修改的值不保存
columns代码如下:
columns: [{
title: '标题',
field: 'channelname',
align: 'center',
valign: 'middle',
sortable: true,
}, {
title: '目标1',
field: 'plan1',
align: 'center',
valign: 'middle',
sortable: true,
formatter:editFormatter
},{
title: '目标2',
field: 'plan2',
align: 'center',
valign: 'middle',
sortable: true,
formatter:edit2Formatter
},{
title: '目标3',
field: 'plan3',
align: 'center',
valign: 'middle',
sortable: true,
formatter:edit3Formatter
}
],
文本输入框:
function editFormatter(value,row,index){
return [
'<input type="text" id="1plan'+row.id+'" class="form-control edit1" data='+value+' value='+value+' onblur="addTarget('+row.id+',1)"/>'
].join("");
}
function edit2Formatter(value,row,index){
return [
'<input type="text" id="2plan'+row.id+'" class="form-control edit2" data='+value+' value='+value+' onblur="addTarget('+row.id+',2)" />'
].join("");
}
function edit3Formatter(value,row,index){
return [
'<input type="text" id="3plan'+row.id+'" class="form-control edit3" data='+value+' value='+value+' onblur="addTarget('+row.id+',3)" />'
].join("");
}
data为原本输入框的值,value为文本框的值,可改变
//id:这条数据的id type :1,2,3:代表的是第几个目标值
function addTarget(id,type)
{
var writevalue=$("#"+type+"plan"+id).val(); //获取改变后的输入框的值
var oldvalue = $("#"+type+"plan"+id).attr("data"); //获取输入框原本的值
if(!(writevalue==oldvalue)){//通过判断输入框的值是否改变,是否写入jsontarget改变的json数据
oldvalue=writevalue;
$("#"+type+"plan"+id).attr("data",oldvalue);
writeJson(id,type,writevalue);
console.log(jsontarget);
}
}
//写入改变的目标值的json数据
function writeJson(id,type,writeValue)
{
for (var i=0;i<jsontarget.length;i++) {
if(jsontarget[i].id==id)//说明现在的json中已经存在这个值
{
if(type==1)
{
jsontarget[i].plan1= writeValue;
}else if(type==2)
{
jsontarget[i].plan2= writeValue;
}else if(type==3)
{
jsontarget[i].plan3= writeValue;
}
return;
}
}
var obj ={ id:id};
if(type==1)
{
obj.plan1= writeValue;
}else if(type==2)
{
obj.plan2= writeValue;
}else if(type==3)
{
obj.plan3= writeValue;
}
jsontarget.push(obj);
}
点击保存提交
$("#btn_save").click(function(){
$.ajax({
url:'save/updateTarget?datatype=jsonp',
data:{
data:JSON.stringify(jsontarget)
},
dataType : "jsonp",
async:true,
success:function (res) {
console.log(res);
bootbox.alert({size: "small",message:res.msg});
$("#table").bootstrapTable('refresh');//保存成功后刷新表格
jsontarget=[];//保存完成后清空修改的目标值
}
});
});