当点击“编辑”按钮时,得分下方的数字变成文本编辑框,“编辑”按钮变成蓝色,文字变成“保存”,如图所示:
点击“保存”按钮,文本框变回数字,“保存”按钮变成绿色,文字变成“编辑”,如图所示:
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标签