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 总结

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