使用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>