LayUI官方文档：https://layui.dev/docs/2/#introduce

XLSX NPM地址：https://www.npmjs.com/package/xlsx
XLSX 使用参考文档：https://juejin.cn/post/7003153489920524301 https://blog.csdn.net/qq_20805455/article/details/122229762

1、在官方网站上下载layui压缩文件解压后选择里面的layui文件夹，

2、XLSX下载里面的xlsx.core.min.js文件就可以了比如在这个https://unpkg.com/browse/xlsx@0.18.5/dist/ 里选择xlsx.core.min.js，不能下载的话，就自己建立一个同名文件，把里面的内容全部复制粘贴到这个新建文件上

文件夹示意图

页面效果如下：

HTML代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <!-- 引入 layui.css -->
  10.     <link href="./layui/css/layui.css" rel="stylesheet">
  11.     <!-- 引入 layui.js -->
  12.     <script src="./layui/layui.js"></script>
  13.     <script type="text/javascript" src="./xlsx.core.min.js"></script>
  14.     <!-- <script type="module" src="./index.js"></script> -->
  15.     <script type="text/javascript" src="./index.js"></script>
  16.     <!-- 覆盖layui原生样式-->
  17.     <style>
  18.         .layui-form-label {
  19.             width: 100px !important;
  20.             /* padding: 9px 15px; */
  21.             padding: 9px 0px !important;
  22.             text-align: right !important;
  23.         }
  24.  
  25.         .btnDiv {
  26.             display: flex;
  27.             flex-direction: row;
  28.             flex-wrap: nowrap;
  29.             align-content: center;
  30.             justify-content: flex-end;
  31.         }
  32.  
  33.         .layui-inline {
  34.             margin-left: 10px;
  35.         }
  36.  
  37.         .layui-laypage-em {
  38.             xbackground-color: #16baaa;
  39.         }
  40.  
  41.         .layui-form-select dl dd.layui-this {
  42.             background-color: #f8f8f8;
  43.             color: #16b777;
  44.             font-weight: 700;
  45.         }
  46.  
  47.         .layui-form-selected {
  48.             xcolor: red;
  49.         }
  50.  
  51.         input:focus {
  52.             background-color: lightblue;
  53.             border-color: #b71818;
  54.         }
  55.  
  56.         /* .layui-badge-rim,
  57.         .layui-border,
  58.         .layui-colla-content,
  59.         .layui-colla-item,
  60.         .layui-collapse,
  61.         .layui-elem-field,
  62.         .layui-form-pane .layui-form-item[pane],
  63.         .layui-form-pane .layui-form-label,
  64.         .layui-input,
  65.         .layui-input-split,
  66.         .layui-panel,
  67.         .layui-quote-nm,
  68.         .layui-select,
  69.         .layui-tab-bar,
  70.         .layui-tab-card,
  71.         .layui-tab-title,
  72.         .layui-tab-title .layui-this:after,
  73.         .layui-textarea {
  74.             border-color: #b71818;
  75.         } */
  76.  
  77.         /* .layui-input-block {
  78.             margin-left: 90px !important;
  79.         } */
  80.     </style>
  81. </head>
  82.  
  83. <body style="padding: 20px;">
  84.     <form class="layui-form" action="">
  85.         <div class="layui-row">
  86.             <div class="layui-col-xs3">
  87.                 <div class="layui-form-item">
  88.                     <label class="layui-form-label">部门</label>
  89.                     <div class="layui-input-block">
  90.                         <select name="department" lay-filter="aihao" id="selectDepartment">
  91.                             <option value=""></option>
  92.                             <!-- <option value="0">写作</option>
  93.                             <option value="1" selected>阅读</option>
  94.                             <option value="2">游戏</option>
  95.                             <option value="3">音乐</option>
  96.                             <option value="4">旅行</option> -->
  97.                         </select>
  98.                     </div>
  99.                 </div>
  100.             </div>
  101.             <div class="layui-col-xs3">
  102.                 <div class="layui-form-item">
  103.                     <label class="layui-form-label">用户</label>
  104.                     <div class="layui-input-block">
  105.                         <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入"
  106.                             autocomplete="off" class="layui-input">
  107.                     </div>
  108.                 </div>
  109.             </div>
  110.             <div class="layui-col-xs3">
  111.                 <div class="layui-form-item">
  112.                     <label class="layui-form-label">性别</label>
  113.                     <div class="layui-input-block">
  114.                         <!-- <input type="radio" name="sex" value="男" title="男" checked> -->
  115.                         <input type="radio" name="sex" value="男" title="男" id="manRadio" />
  116.                         <input type="radio" name="sex" value="女" title="女" id="womanRadio" />
  117.                     </div>
  118.                 </div>
  119.             </div>
  120.             <div class="layui-col-xs3">
  121.                 <div class="layui-form-item">
  122.                     <label class="layui-form-label">状态</label>
  123.                     <div class="layui-input-block">
  124.                         <input type="checkbox" name="state" title="启用" value="启用" id="stateEnable">
  125.                         <input type="checkbox" name="state" title="失效" value="失效" id="stateFailure">
  126.                         <input type="checkbox" name="state" title="禁用" value="禁用" id="stateDisable">
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.         </div>
  131.         <div class="layui-row">
  132.             <div class="layui-col-xs4">
  133.                 <div class="layui-form-item">
  134.                     <label class="layui-form-label">创建时间</label>
  135.                     <div class="layui-inline" id="createTime">
  136.                         <div class="layui-input-inline">
  137.                             <input type="text" autocomplete="off" id="createTime-start-date" class="layui-input"
  138.                                 placeholder="开始日期">
  139.                         </div>
  140.                         <div class="layui-form-mid">-</div>
  141.                         <div class="layui-input-inline">
  142.                             <input type="text" autocomplete="off" id="createTime-end-date" class="layui-input"
  143.                                 placeholder="结束日期">
  144.                         </div>
  145.                     </div>
  146.                 </div>
  147.             </div>
  148.         </div>
  149.         <div class="layui-form-item btnDiv">
  150.             <button type="button" class="layui-btn" id="btnQuery">查询</button>
  151.             <button type="button" class="layui-btn" id="btnReset">清除</button>
  152.             <button type="button" class="layui-btn" id="btnDownload">下载</button>
  153.         </div>
  154.     </form>
  155.  
  156.     <table class="layui-table" lay-filter="parse-table-demo" id="data-table">
  157.         <!-- <colgroup>
  158.             <col width="120">
  159.             <col width="120">
  160.             <col width="120">
  161.             <col width="120">
  162.             <col width="120">
  163.             <col width="120">
  164.             <col width="120">
  165.             <col>
  166.         </colgroup> -->
  167.         <thead>
  168.             <tr>
  169.                 <th lay-data="{field:'id', width:100,hide:true}">id</th>
  170.                 <th lay-data="{field:'index', width:100}">序号</th>
  171.                 <th lay-data="{field:'departmentName', minWidth:120}">部门</th>
  172.                 <th lay-data="{field:'username', width:120}">用户</th>
  173.                 <th lay-data="{field:'sex', width:200}">性别</th>
  174.                 <th lay-data="{field:'state', width:150}">状态</th>
  175.                 <th lay-data="{field:'createTime', minWidth:150}">创建时间</th>
  176.             </tr>
  177.         </thead>
  178.         <tbody id="tableData">
  179.  
  180.         </tbody>
  181.  
  182.     </table>
  183.     <div id="demo-laypage-layout-1" style="margin-top: 10px;"></div>
  184. </body>
  185.  
  186. </html>

JS代码如下：

/** 当前页 */
let currentIndex = 1;
/** 每页数据大小 */
let pageLimit = 2;
/** 总页数 */
let pageTotalCount = 0;
// Usage
layui.use(['form', 'table', 'upload', 'element', 'layer', 'jquery'], function () {
    var layer = layui.layer;
    var table = layui.table;
    var form = layui.form;
    var $ = layui.jquery;
    var laydate = layui.laydate;
    var laypage = layui.laypage;
    //初始化 查询表单里的标签元素数据 start
    let departments = initDepartmentSelect();
    if (departments) {
        $.each(departments, function (index, item) {
            // 下拉菜单里添加元素
            $("#selectDepartment").append(new Option(item.text, item.value));
        });
    }
    // // 渲染
    // laydate.render({
    //     elem: '#ID-laydate-demo'
    // });
    // // 英文版
    // laydate.render({
    //     elem: '#ID-laydate-demo-en',
    //     lang: 'en'
    // });
    // 日期范围 - 左右面板独立选择模式
    laydate.render({
        elem: '#createTime',
        range: ['#createTime-start-date', '#createTime-end-date']
    });
    // // 日期范围 - 左右面板联动选择模式
    // laydate.render({
    //     elem: '#createTime',
    //     range: ['#createTime-start-date', '#createTime-end-date'],
    //     rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
    // });
    form.render();
    //初始化 查询表单里的标签元素数据 end
    queryData();
    //查询事件
    $("#btnQuery").click(function () {
        queryData();
    });
    //重置查询表单事件
    $("#btnReset").click(function () {
        $("#selectDepartment").val('');
        $("#username").val('');
       
        $("#createTime-start-date").val('');
        $("#createTime-end-date").val('');
        $("#stateEnable").prop('checked', false);
        $("#stateFailure").prop('checked', false);
        $("#stateDisable").prop('checked', false);
        $("#manRadio").prop('checked', false);
        $("#womanRadio").prop('checked', false);
        form.render();
        //inidData();
    });
    //excel导出事件
    $("#btnDownload").click(function () {
        exportExcelByTable("#data-table");
        let data = initDataList();
        exportExcelFile(data);
    });
    function queryData() {
        let department = $("#selectDepartment").val();
        let username = $("#username").val();
        let sex = $('input[name="sex"]:checked').val();
        //将页面全部复选框选中的值拼接到一个数组中
        var states = [];
        // $('input[type=checkbox]:checked').each(function () {
        //     arr_box.push($(this).val());
        // });
        $('input[name="state"]:checked').each(function () {
            states.push($(this).val());
        });
        let createTime_start = $("#createTime-start-date").val();
        let createTime_end = $("#createTime-end-date").val();
        //console.log("aaa")
        let result = getTableDataAndTotleCount(department, username, sex, states, createTime_start, createTime_end, currentIndex, pageLimit);
        //console.log("result",result)
        pageTotalCount = result.count;
        let pageData = result.data;
        setTableHtml(pageData);
        // 自定义排版
        laypage.render({
            elem: 'demo-laypage-layout-1',
            count: pageTotalCount,
            limit: pageLimit,
            limits: [2, 4, 8, 16],
            //layout: ['limit', 'prev', 'page', 'count', 'next']
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
            jump: function (obj, first) {
                // console.log(obj);
                // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); // 得到每页显示的条数
                // 首次不执行
                if (!first) {
                    currentIndex = obj.curr;
                    pageLimit = obj.limit;
                    // do something
                    let result = getTableDataAndTotleCount(department, username, sex, states, createTime_start, createTime_end, currentIndex, pageLimit);
                    pageTotalCount = result.count;
                    let pageData = result.data;
                    setTableHtml(pageData);
                    // let data =getTableData(obj.curr,obj.limit);
                    // pageData = pagination(currentIndex, pageLimit, data)
                    // setTableHtml(pageData);
                }
            }
        });
    }
    function setTableHtml(data) {
        let strHtml = "";
        let i =0;
        $.each(data, function (index, item) {
            i++;
            strHtml += (`<tr><td>${item.id}</td><td>${i}</td><td>${item.departmentName}</td>
            <td>${item.username}</td><td>${item.sex}</td><td>${item.state}</td><td>${item.createTime}</td></tr>`);
        });
        document.getElementById('tableData').innerHTML = strHtml;
        table.init('parse-table-demo', {
            // height: ''
        });
        // 行单击事件( 双击事件为: rowDouble )
        table.on('row(parse-table-demo)', function (obj) {
            var data = obj.data; // 获取当前行数据
            console.log('row(data-table)', data);
            // 显示 - 仅用于演示
            layer.msg('当前行数据：<br>' + JSON.stringify(data), {
                offset: '65px'
            });
            // 标注当前点击行的选中状态
            obj.setRowChecked({
                type: 'radio' // radio 单选模式；checkbox 复选模式
            });
        });
    }
});
/** 初始化部门下拉框 */
function initDepartmentSelect() {
    let array = [];
    //模拟从后端拿到的部门数据数组
    let list = [{ id: 1, name: '财务部' }, { id: 2, name: '行政部' }, { id: 3, name: '研发部' }, { id: 4, name: '销售部' }];
    if (list) {
        list.forEach(element => {
            let value = element.id
            let text = element.name
            array.push({ text, value });
        });
    }
    return array;
}
/*** 初始数据 */
function initDataList() {
    let data = [
        { id: 1, departmentId: 1, departmentName: '财务部', username: '张三', sex: '男', state: '启用', createTime: '2023-12-27 10:54:20' },
        { id: 2, departmentId: 2, departmentName: '行政部', username: '李四', sex: '男', state: '失效', createTime: '2023-11-27 10:54:20' },
        { id: 3, departmentId: 3, departmentName: '研发部', username: '王五', sex: '男', state: '禁用', createTime: '2023-12-27 10:54:20' },
        { id: 4, departmentId: 4, departmentName: '销售部', username: '赵六', sex: '男', state: '启用', createTime: '2023-11-27 10:54:20' },
        { id: 5, departmentId: 1, departmentName: '财务部', username: '小丽', sex: '女', state: '启用', createTime: '2023-12-25 10:54:20' },
        { id: 6, departmentId: 1, departmentName: '财务部', username: '小明', sex: '男', state: '启用', createTime: '2023-12-27 10:54:20' },
        { id: 7, departmentId: 3, departmentName: '研发部', username: '小王', sex: '男', state: '启用', createTime: '2023-12-20 10:54:20' },
        { id: 8, departmentId: 1, departmentName: '财务部', username: '小慧', sex: '女', state: '启用', createTime: '2023-12-27 10:54:20' },
        { id: 9, departmentId: 2, departmentName: '行政部', username: '慧慧', sex: '女', state: '失效', createTime: '2023-12-27 10:54:20' },
        { id: 10, departmentId: 1, departmentName: '财务部', username: '晓丽', sex: '女', state: '启用', createTime: '2023-10-27 10:54:20' },
        { id: 11, departmentId: 2, departmentName: '行政部', username: '小莉', sex: '女', state: '启用', createTime: '2023-12-27 10:54:20' },
        { id: 12, departmentId: 1, departmentName: '财务部', username: '田七', sex: '男', state: '启用', createTime: '2023-12-23 10:54:20' },
        { id: 13, departmentId: 2, departmentName: '行政部', username: '张三2', sex: '男', state: '禁用', createTime: '2023-12-22 10:54:20' },
    ];
    return data;
}
/** 获取页面表格的数据和总数 */
function getTableDataAndTotleCount(departmentId, username, sex, states, createTime_start, createTime_end, pageIndex, pageSize) {
   
    let data = initDataList();
    if (departmentId) {
        data = data.filter(m => m.departmentId == departmentId);
    }
    if (username) {
        data = data.filter(m => m.username.includes(username));
    }
    if (sex) {
        data = data.filter(m => m.sex == sex);
    }
    if (states && states.length > 0) {
        data = data.filter(m => states.includes(m.state));
    }
    if (createTime_start && createTime_end) {
        data = data.filter(m => m.createTime <= createTime_end && m.createTime >= createTime_start);
    }
    let count = data.length;
    if (data) {
        data = pagination(pageIndex, pageSize, data);
    }
    return { count, data };
}
/** 分页获取 */
function pagination(pageNo, pageSize, array) {
    var offset = (pageNo - 1) * pageSize;
    return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
}
/**
        * 对Date的扩展，将 Date 转化为指定格式的String
        * 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
        * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        * 例子：
        * (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        * (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
        */
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "H+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
function getDateTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = ('0' + (now.getMonth() + 1)).slice(-2);
    const day = ('0' + now.getDate()).slice(-2);
    const hours = ('0' + now.getHours()).slice(-2);
    const minutes = ('0' + now.getMinutes()).slice(-2);
    const seconds = ('0' + now.getSeconds()).slice(-2);
    const formattedTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    return formattedTime;
}
// 导出excel
/** 根据table导出Excel */
function exportExcelByTable(tableName) {
    // 使用XLSX导出 https://www.npmjs.com/package/xlsx 使用参考文档：https://juejin.cn/post/7003153489920524301 https://blog.csdn.net/qq_20805455/article/details/122229762
    let currentDate = new Date().Format("yyyy-MM-dd HH:mm:ss");
    let excelName = `${currentDate}.xlsx`;
    console.log('excelName', excelName)
    // if (tableList) {
    //     exportExcelFile(tableList, '表1', excelName);
    // } else {
    //     //'没有导出数据'
    // }
    let table1 = document.querySelector(tableName);//document.querySelector("#data-table");
    //将一个table对象转换成一个sheet对象，使用js-xlsx插件将table转成workbook时，会默认把内容是数字的字符串当做数字处理，raw:true属性控制把内容当做字符串进行输出
    let sheet = XLSX.utils.table_to_sheet(table1, { raw: true, skipHeader: true, });
    let wscols = [    // 每列不同宽度px
        { wch: 10 },
        { wch: 15 },
        { wch: 20 },
        { wch: 25 },
        { wch: 25 },
        { wch: 25 },
        { wch: 20 },
        { wch: 25 },
        { wch: 25 },
        { wch: 25 },
        { wch: 25 },
    ];
    // workbook.SheetNames[0]获取到到是文件里的到第一个表格
    sheet["!cols"] = wscols;
    openDownloadDialog(sheetToblob(sheet), excelName);
}
/** 修改表格行高列宽度 */
function test(worksheet) {
    //let table = document.getElementById("exportTable");
    //let worksheet = XLSX.utils.table_to_sheet(table);
    let workbook = XLSX.utils.book_new();
    let wscols = [    // 每列不同宽度px
        { wch: 12 },
        { wch: 26 },
        { wch: 12 },
        { wch: 12 },
        { wch: 14 },
        { wch: 12 },
        { wch: 12 },
        { wch: 15 },
    ];
    // workbook.SheetNames[0]获取到到是文件里的到第一个表格
    worksheet["!cols"] = wscols;
    let wsrows = [{ hpx: 20 }];  // 每行固定高度px
    for (let i = 0; i <= this.total; i++) {   // total  列表条数
        wsrows.push({ hpx: 20 });
    }
    worksheet["!rows"] = wsrows;
    XLSX.utils.book_append_sheet(workbook, worksheet, "sheet");
    try {
        XLSX.writeFile(workbook, `${this.time_date}报表统计.xlsx`);  //  time_date 所选日期
    } catch (e) {
        console.log(e, workbook);
    }
}
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheetToblob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
    var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }); // 字符串转ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}
function openDownloadDialog(url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
}
/**
* 根据json数据导出 excel 文件
* @param array JSON 数组
* @param sheetName 第一张表名
* @param fileName 文件名
*/
function exportExcelFile(array, sheetName = '表1', fileName = 'example.xlsx') {
    const jsonWorkSheet = XLSX.utils.json_to_sheet(array);
    const workBook = {
        SheetNames: [sheetName],
        Sheets: {
            [sheetName]: jsonWorkSheet,
        }
    };
    return XLSX.writeFile(workBook, fileName);
}

layui之静态表格的分页及搜索功能以及前端使用XLSX导出Excel功能的更多相关文章

  1. 【JAVA】JSP+layui框架 静态表格转化成数据表格

    <table lay-filter="demo" class="layui-table" id="excTable"> < ...

  2. layui + mvc + ajax 导出Excel功能

    为了更方便,没基础的伙伴更容易理解,我尽量详细简便 省了很多代码,一步一步的试 自己引入文件 1. html 前端视图代码 Layui的数据绑定 全部代码 @{ Layout = null; } &l ...

  3. PHP导入导出excel表格图片(转)

    写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xml的也用过,csv的就更不用谈了.呵呵.(COM方式不讲了,这种可读的太多了,我也写过利用wp ...

  4. PHP导入导出excel表格图片的代码和方法大全

    基本上导出的文件分为两种: 1:类Excel格式,这个其实不是传统意义上的Excel文件,只是因为Excel的兼容能力强,能够正确打开而已.修改这种文件后再保存,通常会提示你是否要转换成Excel文件 ...

  5. php导出excel表格的使用

    网站后台有很多列表数据,常常都会有导出excel表格的需求,和大家分享一个实用的导出excel表格方法: 不多说,上代码: /** * @param array $data 要导出的数据 * @par ...

  6. 在vue中导出excel表格

    初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...

  7. 使用JAVA导出EXCEL表格（POI）

    一.POI概述 Jakarta POI 是一套用于访问微软格式文档的Java API.POI提供API给Java程序对Microsoft Office格式档案读和写的功能.在许多企业办公系统中,经常会 ...

  8. vue 利用xlsx、xlsx-style、file-saver实现前端导出excel表格 (包括设置单元格居中、边框等样式) antdesignvue、elementui、vxetable 等都适用

    我用的方法是在表格的根组件外层赋一个div用来导出整个表格,所以antdesignvue.elementui.vxetable 或者原生的table写法应该全都适用,此处我用的框架为antdesign ...

  9. easyui combogrid下拉表格的分页/按键/动态搜索

    作者:xfl4629712  <  easyui combogrid下拉表格的分页/按键/动态搜索  > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...

  10. datatable转layui表格v2[分页and带模板]【偏实例】

    本项目由普通mvc+webapi接口构成.按执行顺序,代码如下:主控制器:public ActionResult Index(int id=0) { ViewData["myid" ...

随机推荐

  1. 火山引擎 DataTester 上线“流程画布”功能，支持组合型 A/B 实验分析

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在精细化运营的时代,运营活动同样需要有精细化的策略,例如在年末大促活动中,设计 APP 弹窗提醒.满减.会员领券时 ...

  2. Mac下Homebrew替换镜像

    替换git和homebrew镜像源 一.git加速 查找域名对应的地址 nslookup github.com nslookup github.global.ssl.fastly.Net 修改host ...

  3. 聚合查询 分组查询 F与Q查询 添加新字段

    目录 聚合查询 aggregate 聚合函数 起别名 分组查询 annotate 注释函数 起别名 分组查询报错 分组查询练习 总结 添加新字段 F与Q查询 F查询 字符串拼接 concat方法 Q查 ...

  4. (error) MOVED 12706 10.176.246.204:9736

    使用redis-cli连接上redis后,执行get命令报错: (error) MOVED 12706 10.176.246.204:9736 百度到原因是未以集群模式连接,在连接时加上-c参数就可以 ...

  5. 【Debug】常用问题排查流程

    常用问题排查流程 查看当前用户信息

  6. 【每日一题】26.codeJan与旅行 （贪心）

    补题链接:Here 算法涉及:贪心 思路: 首先,我们处在p位置,显然要么向左走到相邻的城市,要么向右走走到相邻的城市. 有一个不会证明但观察到的结论,从这两个位置走的话,只有四种可能. 可能1:一直 ...

  7. 2 Englishi 词根

    11 mis 错 misuse misfortune misunderstand 12 out 超过: 外 outnumber outspend outdoor 13 over 过度 overprai ...

  8. webpack-小滴课堂学习笔记

    webpack简介 1.webpack是什么 简介:webpack其实就是一个JavaScript应用程序的静态模块打包器. 2.webpack有什么作用 模块化打包:webpack会将项目的资源文件 ...

  9. 分享10个高级sql写法

    本文主要介绍博主在以往开发过程中,对于不同业务所对应的 sql 写法进行归纳总结而来.进而分享给大家. 本文所讲述 sql 语法都是基于 MySql 8.0+ 博主github地址:http://gi ...

  10. java基础数据类型-int类型-浮点型-数据类型的转换--day02

    目录 1. 变量的命名 2. 常量 3. 变量 4. 进制 4.1 进制转换 4.2 整型数据类型 5 浮点型 6. 字符串 7. 整形与字符型之间的转换 8 最常见的一个乱码问题 9. 布尔类型 1 ...