一分一毛也是爱

微信

微信

支付宝

支付宝

观海听潮

观海听潮博客

登录
还没有账号?去注册
观海听潮

观海听潮博客

注册
  • 欢迎来自美国弗吉尼亚州的访客,您好!
×

我的名片

网名:观海听潮

职业:PHP开发工程师

现居:山东省-青岛市

Email:1256699215@qq.com

网站统计

  • 观海听潮•博客
  • 54篇
  • 145条
  • 22697次
  • 308次
  • 美国弗吉尼亚州

您现在的位置是:首页  > 技术杂谈  > Laravel  > 前端 前端

观海听潮

layui数据表格初始化、查询、排序、导出功能的实现

摘要
layui框架非常适合后台管理框架的开发使用,尤其是对于非前端专业人员来说,layui数据表格提供了很多实用的方法,这篇文章就是讲解数据表格的使用。

1、下载layui文件,地址:https://www.layui.com/

2、页面引入layui.js和layui.css。

3、html内容:

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport"

         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>商品订单</title>

   <link rel="stylesheet" href="/component/layui/css/layui.css">

   <style>

       .exportUl{

           display: none;

           position: absolute;

           margin-top:10px;

           left: 0;

           top: 100%;

           z-index: 999;

           padding: 5px 0;

           min-width: 150px;

           min-height: 40px;

           border: 1px solid #d2d2d2;

           text-align: left;

           overflow-y: auto;

           background-color: #fff;

           box-shadow: 0 2px 4px rgba(0,0,0,.12)

       }

       .exportUl li {

           padding: 0 10px;

           line-height: 30px;

           -webkit-transition: .5s all;

           transition: .5s all;

           color: #333

       }

       .exportUl li:hover{

           -webkit-transition: .5s all;

           transition: .5s all;

           background: #f2f2f2

       }

       .exportWarp{

           position: absolute;

           left: 0;

           top: 0;

           z-index: 900;

       }

       .layui-form{

           position: relative;

       }

   </style>

</head>

<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

   <legend>线上交易实物订单明细</legend>

</fieldset>

<form class="layui-form">

   <div class="layui-form-item marginB0 searchWarp">

       <button type="button" style="float: right;" class="layui-btn search" data-type="reload">搜索</button>

       <div class="layui-inline" style="float: right;">

           <input class="layui-input" name="filter" id="filter" placeholder="搜索相关数据" autocomplete="off">

       </div>

       <div class="layui-input-inline" style="width: 100px;float: right;">

           <select name="field" lay-filter="condition" class="condition" id="field">

               @foreach ($search as $key => $item)

                   <option value="{{$key}}">{{$item}}</option>

               @endforeach

           </select>

       </div>

        <div  class="layui-btn exportWarp" style="float: left;"><i class="layui-icon layui-icon-export"></i>

            导出

            <ul class="exportUl">

                <li data-type="csv"  onclick="exportData(this);">导出到 Csv 文件</li>

                <li data-type="xlsx"  onclick="exportData(this);">导出到 Excel 文件</li>

            </ul>

        </div>

   </div>

</form>

<table class="layui-hide" id="order" lay-filter="order"></table>

<script type="text/html" id="barDemo">

   <a class="layui-btn layui-btn-xs" lay-event="detail" href="/admin/order/detail?id=@{{d.id}}"><i class="layui-icon layui-icon-list"></i>查看</a>

</script>

注意:@{{d.id}}中@是laravel的用法;

@foreach ($search as $key => $item)

      <option value="{{$key}}">{{$item}}</option>

@endforeach

后台定义的查询字段。

layui.use(['table','element','layer'], function(){

       var table = layui.table

           ,layer = layui.layer

           ,$ = layui.$

           ,tableSort = 'created_at'//默认排序字段

           ,tableType = 'desc'//默认排序类型

           ,element = layui.element;

       table.render({

           elem: '#order'

           ,url:'{{ route('admin.order.getList') }}'

           ,toolbar: '#toolbarDemo'

           ,title: '订单列表'

           ,cellMinWidth:150

           ,defaultToolbar: ['filter']

           ,sortType:'server'

           ,cols: [[

               {type: 'checkbox'}

               ,{field:'order_no', title:'订单编号',align:'center',width:180}

               ,{field:'source', title:'订单来源',align:'center'}

               ,{field:'created_at', title:'下单时间',align:'center',width:180,sort: true}

               ,{field:'order_status_msg', title:'订单状态',align:'center'}

               ,{field:'pay_type', title:'支付方式',align:'center',sort: true}

               ,{field:'pay_at', title:'支付时间',align:'center',width:180}

               ,{field:'goods_amount', title:'商品总额',align:'center',sort: true}

               ,{field:'logistics_amount', title:'运费总额',align:'center',sort: true}

               ,{field:'order_amount', title:'订单总额',align:'center',sort: true}

               ,{field:'finish_at', title:'完成时间',align:'center',width:180,sort: true}

               ,{field:'merchant_id', title:'店铺ID',align:'center'}

               ,{field:'c.name', title:'店铺名称',align:'center'}

               ,{field:'user_id', title:'买家ID',align:'center'}

               ,{field:'b.name', title:'买家账号',align:'center'}

               ,{field:'consignee', title:'收货人',align:'center'}

               ,{field:'phone', title:'联系方式',align:'center'}

               ,{field:'addresses', title:'收货地址',align:'center'}

               ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:'center'}

           ]]

           ,page: true

       });

})

注意:

table初始化,接口调用,默认是get请求方式,返回json格式{code:0,msg:'请求成功',count:100,data:[]};

使用layui排序时会出现排序顺序不对的现象,layui会按字符串字典排序,不会根据数字大小排序,解决方法:替换layui中的

table.js方法,地址:https://pan.baidu.com/s/1OjwwVmjy02wRQ0rT1euLlQ

4、这样数据表格初始化话完成了,一般表格会用到查询、排序,数据表格自带的排序和导出功能都是很鸡肋的,只能导出当前页数据。所以需要用到layui表格重载,然后重新调用后台接口。

function tableReload(sort,type){

           var filterVal = $('#filter').val();

           var fieldVal = $('#field').val();

           layer.msg('数据重载中,请耐心等待', {

               icon: 16,shade: 0.01,time:0

           });

            table.reload('order', {

               initSort:{

                   field:sort,

                   type:type

               },

               page: {

                   curr: 1 //重新从第 1 页开始

               },

                where: {

                    sort: sort,

                   type: type,

                   field:fieldVal,

                   filter:filterVal,

                },

                done: function(res, curr, count) {

                   tableSort = sort;

                   tableType = type;

                   layer.closeAll();

                }

           })

       }

方法介绍:sort:当前排序字段,type:当前排序是desc还是asc。

重载方法page从第一页开始,initSort:重载后初始化排序,where:请求参数。

sort:排序字段,type:排序类型,field:查询字段,filter:查询关键字

done重载回调:将当前排序重新赋值到全局的排序变量中,用于后期的导出功能使用。

5、重载方法调用:

//排序事件

table.on('sort(order)', function(obj) {

   tableReload(obj.field,obj.type);

});

//查询事件

$('.search').on('click', function(){

    tableReload(tableSort,tableType);

});

6、导出功能。

window.exportData = function(obj){

           //构造查询数据

           var filterVal = $('#filter').val();//查询关键字

           var fieldVal = $('#field').val();//查询的字段

           var exportType = $(obj).attr('data-type');//导出格式xlsx还是csv

           var th = [];//需要导出列,因为用到了layui的defaultToolbar: ['filter']功能,可以手动展示要显示什么内容。数据格式[{key:'order_no',val:订单编号},{key:'source',val:订单来源}]

           $('th').each(function(i){

               if(!($(this).hasClass('layui-hide')||$(this).hasClass('layui-table-col-special'))){

                   var str = {

                       key: $(this).attr('data-field'),

                       val:$(this).text()

                   };

                   th.push(str);

               }

           });

           layer.msg('数据导出中,请耐心等待', {

               icon: 16,shade: 0.01,time:0

           });

           //提交

           $.ajax({

               type: "post",

               dataType: "json",

               url: "{{ route('admin.order.export') }}",

               data:{

                   field:fieldVal,

                   filter:filterVal,

                   th:th,

                   sort:tableSort,

                   type:tableType,

               },

               success: function (data) {

                   layer.closeAll();

                   if(data.code==0){

                       window.location.href = '{{ route('admin.base.exportData') }}?name=订单列表'+'&key='+data.data+'&type='+exportType;

                   }else{

                       layer.msg(data.msg);

                   }

               },

               error: function (data) {

                   layer.msg("服务器开小差啦");

               }

           });

       }

方法介绍:将当前表格的排序、查询、列表展示的字段内容都通过ajax提交给后台,后台会通过数据库查询构造成一个表格数组,并且暂存到cache缓存中,暂存时间10s,暂存后将key返给前端,前端在跳转链接直接下载。

参数说明:name:导出文档名称;key:后台返回的cache的key,需要通过key拿到构造好的数据;type:导出文档的格式,xlsx或者csv。

效果图:

截图 (5).png

后台使用的是php,框架laravel。代码截图:

路由配置:

截图 (6).png

截图 (7).png

控制器方法:

截图 (8).png

截图 (9).png

截图 (10).png

service方法:

截图 (11).png

导出方法:

function exportData($name,$data,$format="xlsx") {

        //基本参数

        require_once('../bootstrap/plugin/PHPExcel/Classes/PHPExcel.php');        

       require_once('../bootstrap/plugin/PHPExcel/Classes/PHPExcel/IOFactory.php');

        $objPHPExcel = new \PHPExcel();

        $cellKey = array(

           'A','B','C','D','E','F','G','H','I','J','K','L','M',

           'N','O','P','Q','R','S','T','U','V','W','X','Y','Z',

           'AA','AB','AC','AD','AE','AF','AG','AH','AI','AJ','AK','AL','AM',

           'AN','AO','AP','AQ','AR','AS','AT','AU','AV','AW','AX','AY','AZ'

       );

        //添加数据

        foreach($data['header'] as $k=>$v){

            $objPHPExcel->setActiveSheetIndex(0)

            ->setCellValue($cellKey[$k].'1', $v);

        }

        foreach($data['data'] as $kk=>$val){

            foreach($val as $k=>$vv){

                $objPHPExcel->setActiveSheetIndex(0)

               ->setCellValue($cellKey[$k].($kk+2), $vv);

            }

        }

        $objPHPExcel->getActiveSheet()->setTitle('Sheet1');      //设置sheet的名称

       $objPHPExcel->setActiveSheetIndex(0);                   //设置sheet的起始位置

       $PHPWriter = \PHPExcel_IOFactory::createWriter( $objPHPExcel,"Excel2007"); //Excel2007

       header('Content-Disposition: attachment;filename='.$name.date('Y_m_d').'.'.$format);

       header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');

       $PHPWriter->save("php://output"); //表示在$path路径下面生成demo.xlsx文件

    }

相关的phpexcel文档自行下载。如果有什么不懂的,可以在线联系我。


转载请注明: 观海听潮博客

本文地址:https://chengzhigang.cn/al/55.html

讨厌 (0)
微博logo QQ空间logo QQlogo 豆瓣logo 人人logo 百度贴吧logo 有道云笔记logo

文章评论

表情表情
×
图片图片

评论列表