【教程】layui数据表格文本框编辑

当点击“编辑”按钮时，得分下方的数字变成文本编辑框，“编辑”按钮变成蓝色，文字变成“保存”，如图所示：

点击“保存”按钮，文本框变回数字，“保存”按钮变成绿色，文字变成“编辑”，如图所示：

toolbar设置参照： https://www.layui.com/demo/table/operate.html

js代码

给数据表格得分一列添加事件

,cols: [[ //表头
	...
	  ,{field: 'tvalue', title: '得分', align:'center', width:60, edit: 'text', event: 'txtmsg'} 
	...
	]]

然后

var editflag=false;
//监听工具条
table.on('tool(tsearch)', function(obj){
	var data = obj.data;
	if(obj.event === 'edit'){
		if(!editflag){
			obj.tr.find('td:eq(5)').click();				
			editflag=true;
			obj.tr.find('td:eq(7)').find('.layui-btn').html("保存");
			obj.tr.find('td:eq(7)').find('a').addClass('layui-btn-normal');
		}
		else{
			obj.tr.find('td:eq(4)').click();
			editflag=false;
			obj.tr.find('td:eq(7)').find('.layui-btn').html("编辑");
			obj.tr.find('td:eq(7)').find('a').removeClass('layui-btn-normal');
			//使用ajax更新数据库
			//something to do
		}
		  
	}
	if(obj.event === 'txtmsg'){
		if(!editflag){
			editflag=true;				
			obj.tr.find('td:eq(7)').find('.layui-btn').html("保存");
			obj.tr.find('td:eq(7)').find('a').addClass('layui-btn-normal');
		}
	}		
});

html部分

<script type="text/html" id="toolbar2">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

注意：html的toolbar代码中，要使用a标签，不要使用button标签