layui載入資料顯示loading 圖示,載入完成loading消失
阿新 • • 發佈:2018-12-17
首先新增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>