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);
   }
};

           

效果圖如下：