使用layui遇到的一些问题及解决方案

1.在做批量删除的时候,存储的数据为数组,后台要求接收的参数也是数组,但是请求的时候并没有成功?

    这是因为后台不识别数组,要把它转换成对象格式,比如:idStr.join(','),这样就把数组转换成对象,成功传递给后台进行数据交互了!

 

2.在执行删除操作后,需要刷新页面,但是还要保持在原页以及原模块,这个时候应该怎么办?

    我们可以找到父页面的分页确定按钮,让它在请求后台成功的时候执行这句代码:$(window.parent.document).find('.layui-laypage-btn').click();

 

 admin.req({
                            url:setter.commonUrl+'/******',
                            method:'post',
                            data:{
                                id:IdStr.join(','),//将数组转换成对象,后台就能成功接收了
                                reason:reasonDel
                            },
                            done: function(res){
                                console.log(res)
                                layer.msg('删除成功',{icon:setter.icon.smile,shade:0.01},function(index){
                                    parent.layer.closeAll();
                                    $(window.parent.document).find('.layui-laypage-btn').click();//刷新页面
                                })
                            }
                        })
 

   

 

3.如何实现表格的批量删除?点击全选,删除所有的数据?

    首先先获取勾选的数据,获取要传递给后台的数据(比如id),将获取到的id存储到数组里,如果是将数组传递到子页面,可以使用layui.sessiondata()将数组存起来,在子页面用到时候再取出来,然后实现数据交互就可以了

var checkStatus = table.checkStatus('table-firm'),
            data = checkStatus.data;
            console.log(data) //获取选中行的数据
            console.log(data.length) //获取选中行数量，可作为是否有选中行的条件
            var str = [];//存入id
            if(data.length>0){
                layui.each(data, function(index,item){//将获取的选中行数据进行遍历
                    str.push(item.id);//将id存入数组
                })
                //    将获取到的存起来
                layui.sessionData(setter.tableName,{
                    key:'IDStr',
                    value:{
                        'IdStr':str
                    }
                })
 
            }

4.如何在layui里实现导出功能?

    在使用ajax请求后台数据时,并没有弹出Excel表格,浏览器也返回了数据,但是是一堆乱码,也就是说使用ajax请求的数据格式不可以,所以就换了一种请求方式window.open()

    

var checkStatus= table.checkStatus('table-firm'),
                data = checkStatus.data,//获取选中的数据
                outList = [];//导出的id数组
            data.forEach(function(item,index){
                outList.push(item.id);
            })
            console.log(data.length)
            if(data.length>0){
                    console.log(outList)
               layer.msg('正在导出...',{icon:setter.icon.loading,time:1000});
               window.open("url?id="+outList.join(','));//注意:传递给后台的数据(数组)一定要转换成对象
            }else{
                layer.msg('请选择要导出的数据',{icon:setter.icon.error,shade:0.01,anim:6,time:1000})
            }

5.表格重载如何使用?

    相信文档上写的清楚之时而在实际项目之中又带点不明白,在实际项目中,重载的时候是有新的接口(新的url),不多说了,代码奉上

var demoReloadVal= $.trim($('#test-table-demoReload').val());//搜索的内容(去掉前后空格)
                table.reload('table-firm',{
                    url:'重载的接口',
                    //对于分页请求的参数
                    request: {
                        pageName: 'page',
                        limitName: 'count'
                    },
                    where:{
                        condition:demoReloadVal//请求参数,将查询的内容传递给后台
                    },
                    page:{
                        curr:1
                    }
                })
            }

 

 

 

6.在数据表格中,点击工具条里的禁用,弹出个确认框,如果确认,就把禁用替换成已禁用?

    这里就可以使用模板引擎的功能亮点了

  

 <!--操作按钮模板-->
                    <script type="text/html" id="firm">
                        <a class="layui-btn layui-btn-xs  layui-btn-danger platDel" lay-event="user-del">删除</a>
 <!--userStatus是从后台返回的数据,可以直接拿来用-->
                        <button class="layui-btn layui-btn-primary platForbid layui-btn-xs {{d.userStatus==0?'':'layui-btn-disabled'}}" lay-event="user-cool" {{d.userStatus==0?'':'disabled'}}>{{d.userStatus==0?'禁用':'已禁用'}}</button>
                    </script>