网站首页   文章专栏   LayUI:编辑数据表格及数据回显
LayUI:编辑数据表格及数据回显
原创 2020-02-17 19:18 ApeNixX 76浏览 Layui

layui表格修改(编辑)功能的实现,弹出表单框进行编辑,然后修改成功后表格数据自动更新

编辑数据表格的某条数据,弹框数据回显功能。具体实现挺简单,先给出代码,下面是整个HTML页面代码,觉得繁琐的可以直接跳过到后面,我会按步骤讲解数据回显功能该如何实现。












 layui.use('table', function() {
        var table = layui.table; //表格
        var statusTpl = function (d) { // 参数d是当前行数据
            if (d.status == 0) {
                return ' ';
            } else {
                return ' ';
            }
        };

        //执行一个 table 实例
        table.render({
            elem: '#demo',
            height: 600,
            width: 1600,
            url: '/get*****List',//数据接口
            title: '类型表',
            page: true, //开启分页
            toolbar: 'default' ,//开启工具栏,此处显示默认图标,可以自定义模板,详见文档,
            totalRow: true ,//开启合计行
            cols: [//表头
                [
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', title: '序号', width: 80, sort: true },
                    { field: 'resourceName', title: '资源名', width: 200 },
                    { field: 'resourcePath', title: '资源url', width: 100 },
                    { field: 'imgSrc', title: '封面', width: 100 },
                    { field: 'resourceDescribe', title: '描述', width: 300 },
                    { field: 'resourceTypeName', title: '类型', width: 100 },
                    { field: 'status', title: '状态', width: 100, templet:statusTpl},
                    { field: 'createTime', title: '上传时间', width: 300 },
                    { fixed: 'right', title:'操作',width: 300, align: 'center', toolbar: '#barDemo' }
                ]
            ]
        });

        //监听 头 工具栏事件
        table.on('toolbar(test)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id),
                data = checkStatus.data; //获取选中的数据
            switch(obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0) {
                        layer.msg('请选择一行');
                    } else if(data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]:' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });
        //监听 行 工具事件
        table.on('tool(test)', function(obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data ,//获得当前行数据
                layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail') {
                layer.msg('查看操作');
            } else if(layEvent === 'del') {
                layer.msg('delete操作');
            } else if(layEvent === 'edit') {
                layer.open({
                    //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
                    type: 1,
                    title: "修改资源信息",
                    shade: false,
                    area: ['500px', '500px'],
                    content: $("#popUpdateTest"), //引用的弹出层的页面层的方式加载修改界面表单
                    success: function(){
                        var select = 'dd[lay-value=' + data.resourceTypeName + ']';
                        $("#resourceName").val(data.resourceName);
                        $("#resourcePath").val(data.resourcePath);
                        $("#resourceDescribe").val(data.resourceDescribe);
                        $('#bg_id').siblings("div.layui-form-select").find('dl').find(select).click();
                        $("#imgSrc").val(data.imgSrc);
                        $("#id").val(data.id);
                    }
                }) //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示,当然也是异步请求的要数据的修改数据的获取
                setFormValue(obj,data)
            }
        });
    });
    layui.use('form', function() {
        var form = layui.form;
        form.on('switch(status)', function(data){
            // 得到开关的value值,实际是需要修改的ID值。
            var id = data.value;

            var status = this.checked ? '0' : '1';
            var index;
            $.ajax({
                type: 'POST',
                url: '/update*****Status',
                dataType:'JSON',
                data: {"id" :id,"status":status  },
                beforeSend:function(){
                   index = layer.msg('正在切换中,请稍候',{icon: 16,time:false,shade:0.8});
                },
                success: function(data){
                    if(data.status==200){
                        setTimeout(function(){
                            layer.close(index);
                            layer.msg('操作成功!');},2000);
                    }else{
                        console.log(data);
                        layer.msg('数据异常,操作失败!');
                    }
                },
                error: function(data){
                    console.log(data);
                    layer.msg('数据异常,操作失败!');
                }
            })
        })
    })

    function setFormValue(obj,data) {

        layui.use('form', function(){
            var form = layui.form;
            form.on('submit(demo11)', function (massage) {
                $.ajax({
                    url: '/update******',
                    type: 'post',
                    dataType: "json",
                    data: {
                        'id': massage.field.id,
                        'resourceName': massage.field.resourceName,
                        'resourcePath':massage.field.resourcePath,
                        'imgSrc':massage.field.imgSrc,
                        'resourceDescribe':massage.field.resourceDescribe,
                        'resourceTypeName':massage.field.resourceTypeName
                    },
                    success: function (data) {
                        if (data.status == 200) {
                            layer.closeAll('loading');
                            layer.load(2);
                            layer.msg("修改成功", {icon: 6});
                            setTimeout(function () {
                                obj.update({
                                    resourceName:massage.field.resourceName,
                                    resourcePath:massage.field.resourcePath,
                                    imgSrc:massage.field.imgSrc,
                                    resourceDescribe:massage.field.resourceDescribe,
                                    resourceTypeName:massage.field.resourceTypeName
                                });//修改成功修改表格数据不进行跳转
                                layer.closeAll();//关闭所有的弹出层
                            }, 1000);
                            $("#reset").trigger("click");
                            $('#demo1').attr('src', "/file/${sessionScope.user.headimg}");
                            加载层 - 风格
                        } else if (data.status == 500) {
                            layer.msg("修改失败", {icon: 5});
                        }

                    }
                })
                return false;
            });

        });
    }

具体实现思路:

  1. 首先肯定要实现图一的页面,这里就不讲述了。使用监听行工具事件即可。(可百度)

  2. 点击“编辑”按钮,要弹出编辑框。在编辑框上回显数据

  3. 先用layer弹层,弹出一个编辑框即“popUpdateTest”,编辑框格式如上图代码。

  4. 其次,对编辑框“popUpdateTest”里面的input元素进行赋值。采用$("..").val(..)方法赋值。

完成数据回显功能。

版权声明:本文由ApeNixX原创出品,转载请注明出处!

本文链接:http://www.apenixx.top/article/details/1581938293


  Layui    前端 

赞助本站,网站的发展离不开你们的支持!
来说两句吧
最新评论
  • 不落阁
    不落阁
    我为大家做了模拟留言与回复!试试吧!

    Absolutely
    Absolutely这是用户回复内容

    2017-03-18 18:26回复

    Absolutely
    Absolutely 回复 不落阁这是第二个用户回复内容

    2017-03-18 18:26回复