layui学习记录（二）：弹层页编辑功能
1 前端HTML部分
实现的功能就是出现一个弹层页表单，输入需要修改的数据后，数据表格会更新为新的数据。个人理解是属于一个行监听事件的拓展。
- html代码
这部分的代码主要是用html5写一个弹层页的表单，标签样式都是用layui内置样式。
ps:我这里是做的一个邮件管理的数据表格，所以都是以修改邮箱信息为例。
<script type="text/html" id="edit_form">
<div class="layui-col-md10" style="margin-left: 35px;margin-top: 20px">
<form class="layui-form layui-form-pane" lay-filter="edit_form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="user_name" required lay-verify="required" placeholder="请输入新的用户名"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="mail_address" required lay-verify="required" placeholder="请输入新的邮箱"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮件类型</label>
<div class="layui-input-block">
<select name="mail_type" lay-verify="required" lay-filter="mail_type">
<option value="">请选择</option>
<option value="注册邮件">注册邮件</option>
<option value="报名邮件">报名邮件</option>
</select>
</div>
</div>
<div class="layui-form-item" style="margin-top: 20px">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
script>
- 效果
2 前端Javascript部分
弹层页的布局和样式写好后，就要给编辑按钮绑定事件函数，实现点击‘编辑’按钮后能显示弹层页。废话不多说，上个代码~都是按照layui行监听工具文档修改的，功能函数的详细描述都可以查到。
table.on('tool(test)', function(obj){
//获取当前行数据
var data = obj.data;
//console.log(obj)
//删除按钮功能
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});//编辑按钮功能
} else if(obj.event === 'edit'){
layer.open({
title:'修改用户信息',
type:1,
area:['420px','330px'],
content:$('#edit_form').html(),
})
form.render()//更新渲染表单
form.val('edit_form',{
//填充表单
user_name:obj.data.meeting_register_id,
mail_address:obj.data.mail_address
})
//提交编辑表单
form.on('submit(formDemo)',function(messge){
console.log(messge.field);
console.log(obj.data);
$.ajax({
url:"{:url('EmailManagement/edit_form')}",
method:"POST",
// traditional:true,
data: {
id:obj.data.id,
old_meeting_register_id:obj.data.meeting_register_id,
old_mail_address:obj.data.mail_address,
old_mail_type:obj.data.mail_type,
new_meeting_register_id:messge.field.user_name,
new_mail_address:messge.field.mail_address,
new_mail_type:messge.field.mail_type
},
success:function (msg) {
console.log(msg);
// var returnCode = msg.returnValue//取得返回数据（Sting类型的字符串）的信息进行取值判断
if (msg) {
layer.closeAll('loading');
layer.load(2);
layer.msg("修改成功", {icon: 6});
setTimeout(function () {
obj.update({
meeting_register_id: messge.field.user_name,
mail_address: messge.field.mail_address,
mail_type: messge.field.mail_type
});//修改成功修改表格数据不进行跳转
layer.closeAll();//关闭所有的弹出层
}, 1000);
// 加载层 - 风格
} else {
layer.msg("修改失败", {icon: 5});
}
}
})
return false;//阻止表单跳转,网页url不显示提交的参数。
})
}
});
代码里面最需要注意的就是下面几点：
1、用layer.open的话，layui提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。content不仅可以传入String还可以传入DOM类型，本文选择传一个DOM，就是我们前端编写好的弹层页：id=edit_form。ps：需要用jQuery库。
layer.open({
title:'修改用户信息',
type:1,
area:['420px','330px'],
content:$('#edit_form').html(),
})
2、弹层页的表单需要重新渲染。使用form.render()，这里我的理解是弹层页的表单元素是动态插入的。这时 form 模块的自动化渲染是会对其失效，所以要重新的更新渲染。
3、编辑表单的提交。这里也是用了表单模块form的事件监听，对表单的提交按钮lay-filter="formDemo"进行监听。在事件监听里最重要的就是向后台去请求数据，我用的是jQuery的异步请求$.ajax。
url是我发送请求的后台方法，采用POST请求，数据是修改前表格的值和修改后表单的值。并且如果请求成功，则执行修改成功。
$.ajax({
url:"{:url('EmailManagement/edit_form')}",
method:"POST",
// traditional:true,
data: {
id:obj.data.id,
old_meeting_register_id:obj.data.meeting_register_id,
old_mail_address:obj.data.mail_address,
old_mail_type:obj.data.mail_type,
new_meeting_register_id:messge.field.user_name,
new_mail_address:messge.field.mail_address,
new_mail_type:messge.field.mail_type
},
3 后台部分
后台主要是使用ThinkPHP框架，详细的内容查看：TP5手册的请求部分。这部分代码的目的是为了获取表单的新参数去更新后台数据库的值，更新后返回的形式也是JSON。
public function edit_form(){
$request=Request::instance();
//获取$.ajax请求的post数据
if($request->isPOST()){
$data=array();
$id=$request->post('id');
//编辑更新后的数据
$new_meeting_register_id=$request->post('new_meeting_register_id');
$new_mail_address=$request->post('new_mail_address');
$new_mail_type=$request->post('new_mail_type');
$updata=db('collect_email')->where('id',$id)->update([
'meeting_register_id'=>$new_meeting_register_id,
'mail_address'=>$new_mail_address,
'mail_type'=>$new_mail_type
]);
$result=array();
if($updata==1){
$result['code']=200;
echo json_encode($result,JSON_UNESCAPED_UNICODE);
}
}
}
4 效果
修改后的表格：可以看到邮箱已经被修改。
5 总结
网上关于弹层页编辑表格的内容的教程还是蛮少的，我也是看了文档还有借鉴大佬们的相关代码慢慢修改，最后完成了这个功能。文章中一些注意事项是困扰我比较久的问题，所以记录的比较细致，欢迎交流~