layui列表中的编辑和新增数据以及删除的功能实现

上一篇文章讲到如何通过layui.js请求后台接口的数据 渲染列表页面以及搜索列表的功能

这一篇讲述一下 编辑和新增的功能开发

---

新增页面的实现

编辑页面的实现

---

先讲增加功能

老规矩 依然是先页面的搭建

说明一下 就是通过js将这个表单包裹起来 也就是不止页面显示 通过JS的触发之后在才能出现

因此绑定了属性id boodTemplate 

然后其他的组件都是直接拿layui现成的 

另外 这个代码是用于编辑和新增的  他们共用同个表单 唯一区别就是 有传id的时候 对应的组件就会有当前id的值

至于值的渲染 就是如上述显示的那样 用layui的模板标签进行渲染

好了，现在看下JS方面

首先点击添加的按钮 就会跳出弹窗 弹窗的内容就是我们上面用js包裹的内容

跳出弹窗之后 填入内容  然后触发提交的按钮 也就是下面这个

这个是lay的属性 所以js这边通过监听他 只要点击之后 就会触发方法 去请求后端提供的接口

可以看到 我们对提交的监听处理中 编辑和新增都是放在同个地方进行提交处理的

至此 新增功能就完成了

---

接下来是编辑功能

编辑功能需要提到一点 他的布局也是用js包裹起来 然后通过渲染列表的时候 显示出来

好 通过触发编辑按钮 对应的属性就会触发监听方法 根据id参数请求这条数据的相关数据

然后将数据渲染到之前共用的布局上

这样点击编辑 就会出现弹窗 然后对应的输入框会有值供我们编辑 

编辑完成 点击提交 触发方法 

到这里  编辑更新的功能就做好了  

---

关于删除的实现 

和编辑的实现过程一样 触发属性绑定的方法 进行请求 然后成功与否

删除功能就做完了

---

贴上总代码：

    

        主页
        保证金模板
    


    

        

        
        

                
                

                        名称：
                        

                            
                        
                
                

                        搜索
                
            
        

        

            

                添加保证金模板
            
            
            
        
    

/*
 * 保证金模板
 */
layui.define(['table', 'form', 'util', 'laytpl'], function (exports) {
    var $ = layui.jquery;
    var table = layui.table;
    var form = layui.form;
    var admin = layui.admin;
    var laytpl = layui.laytpl;


    //保证金模板列表
    table.render({
        elem: '#LAY-bondTemplate-lst-manage'
        , url: layui.setter.domain + "/admin/template/bondTemplateListPage"
        , cols: [[
            {field: 'id', title: '编号'}
            , {field: 'name', title: '名称'}
            , {field: 'ratio', title: '基准保证金比例'}
            , {field: 'remark', title: '模板说明'}
            , {
                field: 'create_time',
                title: '创建时间',
                templet: '
{{ layui.util.toDateString(d.create_time*1000) }}
'
            }
            , {title: '操作', align: 'center', toolbar: '#table-bondTemplate-lst', minWidth: 150}
        ]]
        , id: 'bondTemplateList'
        , page: true
        , limit: 15
        , where: {
            token: layui.data('layuiAdmin').token
        }
    });

    //监听工具条
    table.on('tool(LAY-bondTemplate-lst-manage)', function (obj) {
        var data = obj.data;
        if (obj.event === 'bondTemplateDel') {  //删除
            admin.req({
                url: layui.setter.domain + '/admin/template/delBondTemplate',
                data: {"id": data.id},
                dataType: 'jsonp',
                success: function (res) {
                    if (res.code == '0') {
                        layer.msg("删除成功", function (index) {
                            obj.del()
                            layer.close(index);
                        });
                    } else {
                        layer.msg('删除失败！', {icon: 2, time: 1000});
                    }
                },
                error: function (res, type) {
                    layer.msg('删除失败！', {icon: 2, time: 1000});
                }
            });
        } else if (obj.event === 'bondTemplateEdit') {
            data.list = layui.data('bondTemplateList').list;
            var content = $("#bondTemplateList").html();
            laytpl(content).render(data, function (string) {
                layer.open({
                    type: 1,
                    title: "修改风控模板信息",
                    area: ['1200px', '400px'], //宽高
                    content: string
                });
                form.render('select');
            });
        }
        return false;
    });

    $(document).on('click', '#addbondTemplate', function () {
        var data = [];
        data.list = layui.data('bondTemplateList').list;
        var content = $("#bondTemplateList").html();
        laytpl(content).render(data, function (string) {
            layer.open({
                type: 1,
                title: "添加保证金模板",
                area: ['1200px', '400px'], //宽高
                content: string
            });
            form.render('select');
        });
    });

    /* 监听提交 */
    form.on('submit(bond_sumbit)', function (data) {
        var url = data.field.id > 0 ? '/admin/template/updateBondTemplate' : '/admin/template/addBondTemplate';
        admin.req({
            url: layui.setter.domain + url,
            data: data.field,
            dataType: 'jsonp',
            success: function (res) {
                if (res.code == '0') {
                    layer.msg('处理成功', {time: 1000}, function () {
                        layer.closeAll();
                        table.reload('bondTemplateList');
                    });
                } else {
                    layer.msg(res.msg);
                }
            }
        });
        return false;
    });

    //保证金模板搜索
    $("#reloadlstBond").on('click',function(){
        var name = $('#name').val();//名称
        table.render({
            elem: '#LAY-bondTemplate-lst-manage'
            , url: layui.setter.domain + "/admin/template/bondTemplateListPage?name="+name
            , cols: [[
                {field: 'id', title: '编号'}
                , {field: 'name', title: '名称'}
                , {field: 'ratio', title: '基准保证金比例'}
                , {field: 'remark', title: '模板说明'}
                , {
                    field: 'create_time',
                    title: '创建时间',
                    templet: '
{{ layui.util.toDateString(d.create_time*1000) }}
'
                }
                , {title: '操作', align: 'center', toolbar: '#table-bondTemplate-lst', minWidth: 150}
            ]]
            , id: 'bondTemplateList'
            , page: true
            , limit: 15
            , where: {
                token: layui.data('layuiAdmin').token
            }
        });
    });

    exports('template/bondTemplate', {})
});

最近刚开始规范的接触layui 有任何问题 欢迎在评论区留言

关于这个layui的项目 我会在资源那边进行上传 感兴趣的自行下载！

https://download.csdn.net/download/zhangzeshan/11603746