bootstraptable 行內多個輸入框編輯,儲存
阿新 • • 發佈:2019-02-03
效果如下:
點選輸入框可修改輸入框的值,修改完後點擊儲存
注意:沒有修改的值不儲存
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=[];//儲存完成後清空修改的目標值
}
});
});