27
2019
12

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

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

image.png

image.png


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

image.png

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标签

打赏
« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。