layui 由职业前端倾情打造,面向所有层次的前后端开发者,零门槛开箱即用的前端UI解决方案

前言

在项目中使用到了layui,可以说,用起来非常的爽,绝对不输任何一个前端框架,就拿表格自动渲染数据来说,完全是告别了苦逼的js拼接时代,为layui点赞

正文(bug必填)

具体操作流程如下:

假设我现在使用数据表格渲染出来11条数据,第二页有1条,然后我删除了第二页的唯一一条记录,然后reload这个table,就显示无数据

上图是我在layui官方实例demo测试,点击前往

按照正常的操作流程,删完第二页最后一条数据,应该表格重载进第一页,显示第一页数据

修改如下

            table.render({
                elem: '#business' //指定原始表格元素选择器(推荐id选择器)
                ,id: 'business'
                ,limit: 15
                ,height: 650 //容器高度
                ,method:"post"
                ,url:"/cloud/user/department/loadDepartments"
                ,cols: [[
                    {field:'name', minWidth: 150,title:'业务名称',fixed:'left'},
                    {toolbar: '#barDemo',minWidth:200,title:'操作'}]] //设置表头
                ,page: true
                ,loading: true
                ,skin:'row'
                ,even: true
                ,request:{
                    pageName: 'page' //页码的参数名称,默认:page
                    ,limitName: 'limit' //每页数据量的参数名,默认:limit
                },
                done: function(res, curr, count){
                    //---------重点
                    if(res.data ==""&& curr != 1){
                        table.reload('business',{page:{curr:curr-1}});
                    }
                }
            });

          //监听工具条
            table.on('tool(business)', function(obj){ 
            
                var data = obj.data //获得当前行数据
                        ,layEvent = obj.event; 

                if(layEvent === 'del'){
                    layer.confirm('真的删除么', function(index){
                        //向服务端发送删除指令
                       CommonUtil.postJson('/cloud/user/department/deleteDepartment',{"departmentId": data._id},function (data) {
                            if(data.status){
                                layer.close(index);
                                layer.msg(data.msg)
                                <!--必须-->
                                table.reload('business');
                            }else{
                                layer.msg(data.msg);
                            }
                        })
                    });

                } 
            });

           

        });


这里需要说一哈,修改的原理:

一般删除或添加操作后,都需要table.reload()下,才能显示,最新的数据,我们在reload后判断返回的数据res.data是否为

空并且 curr是否等于1

最后

感谢layui为我们带来精彩的前端框架~

文末,益达同学不善文笔,写作或许让你不懂,可发邮件电邮我呃~

欢迎各种交友骚扰~

欢迎加入大前端圈子 大前端~

大家一起交流web前端,不止于技术~


扫描二维码,在手机上阅读!