Layui数据表格导出预览

开发工具与关键技术：mvc、layui、js、html
作者：张俊辉
撰写时间：2019年04月17日

• 在有些时候我们在实现某些功能时需要获取数据表格的查询条件，例如导出Excel表格时就需要获取条件查询表单的查询条件与数据表格内的查询条件对比，可以判断是否已经以条件查询表单的查询条件查询出数据，从而达到导出预览的效果！

步骤一：数据表格初始化加载与导入导出工具按钮绑定按钮

<script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="derived">导出</button>
            <button class="layui-btn layui-btn-sm" lay-event="tolead">导入</button>
        </div>
</script>

 layui.use('table', function () {
	var table = layui.table;
	//供应商信息表
    table.render({
        elem: '#Supplier'
      , method: 'post'
      , toolbar: '#toolbarDemo'
      , id: 'idTest'
      , url: 'SelectSupplier' //数据接口
      , page: true //开启分页
      , cols: [[ //表头
        具体相关参数请产考Layui说明文档
      ]]
      , limit: 5
        , response: {
            statusName: 'success' //规定数据状态的字段名称，默认：code
          , statusCode: true //规定成功的状态码，默认：0
          , countName: 'totalRows' //规定数据总数的字段名称，默认：count
        }
        , request: {
            pageName: 'curPage' //页码的参数名称，默认：page
          , limitName: 'pageSize'
        }
    });
});

步骤二：监听条件查询表单提交：

var tableSupplier2;//供应商多条件
layui.use('form', function () {
    var form = layui.form;
    //多条件查询供应商信息
    form.on('submit(demo1)', function (data) {
        layui.use('table', function () {
            var table = layui.table;
            tableSupplier2 = table.reload('idTest', {
                where: data.field
            });
        });
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
});

步骤三：监听头部工具栏导出按钮点击事件

layui.use('table', function () 
{
	var table = layui.table;
	//监听供应商信息头工具栏事件
    table.on('toolbar(Supplier)', function (obj) {
    	switch (obj.event) {
           case 'derived':
                layer.confirm("是否要导出当前供应商数据？", {
                   icon: 3,
                   btn: ["确定", "取消"]
                }, function (layerIndex) {
                   layer.close(layerIndex);
                   DerivedClick();
                });
                break;
       };
    });
});

步骤四：对比条件并显示导出模态框或提示框：

//供应商信息导出模态框
function DerivedClick() {
   var SupplierName2 = "";var CompanyName2 = "";var SupplierNumber2 = "";
   try {
       var Supplierwhere = tableSupplier2.config.where;
       SupplierName2 = Supplierwhere.SupplierName;
       CompanyName2 = Supplierwhere.CompanyName;
       SupplierNumber2 = Supplierwhere.SupplierNumber;
   }
   catch (e) {
       SupplierName2 = "";CompanyName2 = "";SupplierNumber2 = "";
   }
   if ($("#demo1 input[name='SupplierName']").val() != SupplierName2||$("#demo1 input[name='CompanyName']").val() != CompanyName2||$("#demo1 input[name='SupplierNumber']").val() != SupplierNumber2) {
       layui.use('layer', function () {
           var layer = layui.layer;
           layer.msg('请先查询并预览需要导出数据！', { icon: 0 });
       });
   }
   else {
       layui.use('layer', function () {
           var layer = layui.layer;
           layer.open({
               type: 1,
               title: '选择导出列',
               area: ['850px', '330px'],
               content: $('#DerivedLayer'), 
           });
       });
       $("#DerivedForm input[name='SupplierName2']").val(SupplierName2);
       $("#DerivedForm input[name='CompanyName2']").val(CompanyName2);
       $("#DerivedForm input[name='SupplierNumber2']").val(SupplierNumber2);
   }
};

效果图如下：