master

分支 (2)

管理

管理

master

develop

layui-excel
/
demo.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>layui表格导出示例</title>

    <link rel="stylesheet" href="layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-card">
      <div class="layui-card-header">常用两级表头：</div>
      <div class="layui-card-body">
        <table
          class="layui-table"
          id="ID-table-demo-theads-1"
          lay-filter="ID-table-demo-theads-1"
        ></table>
      </div>
    </div>

    <div class="layui-card">
      <div class="layui-card-header">更多级表头（支持无限极）：</div>

      <div class="layui-card-body">
        <table class="layui-table" id="ID-table-demo-theads-2"></table>
      </div>
    </div>

    <script type="text/html" id="templet-demo-theads-tool">
      <div class="layui-clear-space">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="export"
          >导出</a
        >
      </div>
    </script>
    <script src="exceljs.min.js"></script>
    <script src="FileSaver.min.js"></script>
    <script src="layui/layui.js"></script>
    <script>
      layui
        .extend({
          layuiExcel: "{/}layuiExcel",
        })
        .use(["table", "layuiExcel"], function () {
          var table = layui.table,
            layuiExcel = layui.layuiExcel;

          var data = [
            {
              username: "张小三",
              amount: 18,
              province: "浙江",
              city: "杭州",
              zone: "西湖区",
              street: "西溪街道",
              address: "西溪花园",
              house: "30栋1单元",
            },
            {
              username: "李小四",
              amount: 39,
              province: "江苏",
              city: "苏州",
              zone: "姑苏区",
              street: "丝绸路",
              address: "天墅之城",
              house: "9幢2单元",
            },
            {
              username: "王小五",
              amount: 8,
              province: "江西",
              city: "南昌",
              zone: "青山湖区",
              street: "艾溪湖办事处",
              address: "中兴和园",
              house: "1幢3单元",
            },
            {
              username: "赵小六",
              amount: 16,
              province: "福建",
              city: "泉州",
              zone: "丰泽区",
              street: "南洋街道",
              address: "南洋村",
              house: "6幢1单元",
            },
            {
              username: "孙小七",
              amount: 12,
              province: "湖北",
              city: "武汉",
              zone: "武昌区",
              street: "武昌大道",
              address: "两湖花园",
              house: "16幢2单元",
            },
            {
              username: "周小八",
              amount: 11,
              province: "安徽",
              city: "黄山",
              zone: "黄山区",
              street: "汤口镇",
              address: "温泉村",
              house: "21号",
            },
          ];

          var cols1 = [
            [
              { field: "username", title: "联系人", rowspan: 2, width: 80 },
              { title: "地址", colspan: 3 },
              { field: "amount", title: "数量", rowspan: 2, width: 80 },
              {
                title: "操作",
                rowspan: 2,
                fixed: "right",
                width: 160,
                align: "center",
                toolbar: "#templet-demo-theads-tool",
              },
            ],
            [
              { field: "province", title: "省", width: 100 },
              { field: "city", title: "市", width: 100 },
              { field: "zone", title: "区", width: 100 },
            ],
          ];

          table.render({
            elem: "#ID-table-demo-theads-1",
            page: true,
            limit: 6,
            limits: [6],
            data: data,
            cols: cols1,
          });

          var cols2 = [
            [
              { field: "username", title: "联系人", rowspan: 3, width: 80 },
              { field: "amount", title: "数量", rowspan: 3, width: 80 },
              { title: "地址1", colspan: 5 },
              { title: "地址2", colspan: 2 },
              {
                title: "操作",
                rowspan: 3,
                fixed: "right",
                width: 160,
                align: "center",
                toolbar: "#templet-demo-theads-tool",
              },
            ],
            [
              { field: "province", title: "省", rowspan: 2, width: 100 },
              { field: "city", title: "市", rowspan: 2, width: 100 },
              { field: "center", title: "详细", colspan: 3 },
              { field: "province", title: "省", rowspan: 2, width: 100 },
              { field: "city", title: "市", rowspan: 2, width: 100 },
            ],
            [
              { field: "street", title: "街道", width: 100 },
              { field: "address", title: "小区", width: 100 },
              { field: "house", title: "单元", width: 100 },
            ],
          ];

          table.render({
            elem: "#ID-table-demo-theads-2",
            page: true,
            limit: 6,
            limits: [6],
            cellMinWidth: 80,
            data: data,
            cols: cols2,
          });

          table.on("tool(ID-table-demo-theads-1)", function (obj) {
            if (obj.event == "export") {
              layuiExcel.exportExcelXlsx(cols1, data, "两级表头");
            }
          });

          table.on("tool(ID-table-demo-theads-2)", function (obj) {
            if (obj.event == "export") {
              layuiExcel.exportExcelXlsx(cols2, data, "更多级表头");
            }
          });
        });
    </script>
  </body>
</html>