1. 程式人生 > >bootstraptable 行內多個輸入框編輯,儲存

bootstraptable 行內多個輸入框編輯,儲存

效果如下:

點選輸入框可修改輸入框的值,修改完後點擊儲存

注意:沒有修改的值不儲存

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=[];//儲存完成後清空修改的目標值
          }
        });
		
	});