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>
  • 效果
    layui学习记录(二):弹层页编辑功能插图

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 效果

layui学习记录(二):弹层页编辑功能插图(1)
修改后的表格:可以看到邮箱已经被修改。
layui学习记录(二):弹层页编辑功能插图(2)

5 总结

网上关于弹层页编辑表格的内容的教程还是蛮少的,我也是看了文档还有借鉴大佬们的相关代码慢慢修改,最后完成了这个功能。文章中一些注意事项是困扰我比较久的问题,所以记录的比较细致,欢迎交流~

没有账号? 忘记密码?

社交账号快速登录