bootstraptable 行内多个输入框编辑，保存

最新推荐文章于 2025-05-29 11:56:13 发布

LLL_LH

最新推荐文章于 2025-05-29 11:56:13 发布

阅读量6.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/82256509

bootstrap 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种实现表格单元格可编辑的功能，并在单元格值发生变化时进行保存的方法。通过自定义表格列的格式器，可以将单元格转换为文本输入框，允许用户直接在表格中修改数据。同时，系统会比较新旧值，只有当值发生改变时才更新保存到 JSON 数据结构中。最后，通过 AJAX 请求将修改后的数据发送到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

点击输入框可修改输入框的值，修改完后点击保存

注意：没有修改的值不保存

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