1. 程式人生 > >layui載入資料顯示loading 圖示,載入完成loading消失

layui載入資料顯示loading 圖示,載入完成loading消失

首先新增loading,var index = layer.load(1);//新增laoding,0-2兩種方式 其次,table.render 中增加 done:function () { layer.close(index) //載入完資料 } 詳細程式碼如下:

<script>
            layui.use(['layer','table','form'],function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                var index  = layer.load(1);

                //使用者表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    ,height: 500
                    ,url: "{{ route('admin.data') }}" //資料介面
                    ,where:{model:"user"}
                    ,page: true //開啟分頁
                    ,cols: [[ //表頭
                        {checkbox: true,fixed: true}
                        ,{field: 'id', title: 'ID', sort: true,width:80}
                        ,{field: 'logname', title: '使用者名稱'}
                        ,{field: 'email', title: '郵箱'}
                        ,{field: 'phone', title: '電話'}
                        ,{field: 'created_at', title: '建立時間'}
                        ,{field: 'updated_at', title: '更新時間'}
                        ,{fixed: 'right', width: 320, align:'center', toolbar: '#options'}
                    ]]
                    ,skin:'line' //表格風格
                    ,even:true
                    ,limit:10
                    ,done:function () {
                        layer.close(index) //載入完資料
                    }
                });

                //監聽工具條
                table.on('tool(dataTable)', function(obj){ //注:tool是工具條事件名,dataTable是table原始容器的屬性 lay-filter="對應的值"
                    var data = obj.data //獲得當前行資料
                        ,layEvent = obj.event; //獲得 lay-event 對應的值
                    if(layEvent === 'del'){
                        layer.confirm('確認刪除嗎?', function(index){
                            $.post("",{_method:'delete',ids:[data.id]},function (result) {
                                if (result.code==0){
                                    obj.del(); //刪除對應行(tr)的DOM結構
                                }
                                layer.close(index);
                                layer.msg(result.msg,{icon:6})
                            });
                        });
                    } else if(layEvent === 'edit'){
                        location.href = '/admin/user/'+data.id+'/edit';
                    } else if (layEvent === 'role'){
                        location.href = '/admin/user/'+data.id+'/role';
                    } else if (layEvent === 'permission'){
                        location.href = '/admin/user/'+data.id+'/permission';
                    }
                });

                //按鈕批量刪除
                $("#listDelete").click(function () {
                    var ids = []
                    var hasCheck = table.checkStatus('dataTable')
                    var hasCheckData = hasCheck.data
                    if (hasCheckData.length>0){
                        $.each(hasCheckData,function (index,element) {
                            ids.push(element.id)
                        })
                    }
                    if (ids.length>0){
                        layer.confirm('確認刪除嗎?', function(index){
                            $.post("",{_method:'delete',ids:ids},function (result) {
                                if (result.code==0){
                                    dataTable.reload()
                                }
                                layer.close(index);
                                layer.msg(result.msg,{icon:6})
                            });
                        })
                    }else {
                        layer.msg('請選擇刪除項',{icon:5})
                    }
                })

            })
        </script>