layui資料表格的工具欄自帶匯出Excel 會將身份證等 長整數的 自動變成E+並且 後面有000.從而導致資料不能完整匯出。
解決方案:
1.先下載Excel的外掛包。將壓縮包內的兩個js放到 layui的modules裡面,如圖
2.在自己的js裡的載入這裡 加入Excel的包
3.在Html加入資料表格用的工具欄
1 <script type="text/html" id="ReportTBtoolbar"> 2 <div class="layui-btn-container"> 3 <button class="layui-btn layui-btn-sm" lay-event="seeReport"><i class="layui-icon"></i>檢視報告</button> 4 <button class="layui-btn layui-btn-sm" lay-event="printReport"><i class="layui-icon"></i>列印報告</button> 5 <button class="layui-btn layui-btn-sm" lay-event="printBarCode"><i class="layui-icon"></i>列印條碼</button> 6 </div> 7 <div class="layui-table-tool-self_diy"> 8 <span class="layui-inline yutons-header-tool" title="篩選列" lay-event="LAYTABLE_COLS"> 9 <i class="layui-icon layui-icon-cols"></i> 10 </span> 11 <span class="layui-inline yutons-header-tool" title="匯出Excel" lay-event="table_export"> 12 <i class="layui-icon layui-icon-export"></i> 13 </span> 14 <span class="layui-inline yutons-header-tool" title="列印" lay-event="LAYTABLE_PRINT"> 15 <i class="layui-icon layui-icon-print"></i> 16 </span> 17 </div> 18 </script>
如圖:
4.在資料表格的js裡修改並加入
1 //頭工具欄事件 2 table.on('toolbar(ReportTB)', function (obj) { 3 var checkStatus = table.checkStatus(obj.config.id); 4 switch (obj.event) { 5 case 'table_export': 6 exportFile('ReportTB'); 7 break; 8 }; 9 });
5.在自己的js裡 最後加入 以下Excel的擴充套件方法
1 if (!Array.from) { 2 Array.from = function (el) { 3 return Array.apply(this, el); 4 } 5 } 6 7 function exportFile(id) { 8 //根據傳入tableID獲取表頭 9 var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0); 10 var htrs = Array.from(headers.querySelectorAll('tr')); 11 var titles = {}; 12 for (var j = 0; j < htrs.length; j++) { 13 var hths = Array.from(htrs[j].querySelectorAll("th")); 14 for (var i = 0; i < hths.length; i++) { 15 var clazz = hths[i].getAttributeNode('class').value; 16 if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') { 17 //排除居左、具有、隱藏欄位 18 //修改:預設欄位data-field+i,相容部分資料表格中不存在data-field值的問題 19 titles['data-field' + i] = hths[i].innerText; 20 } 21 } 22 } 23 //根據傳入tableID獲取table內容 24 var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1); 25 var btrs = Array.from(bodys.querySelectorAll("tr")) 26 var bodysArr = new Array(); 27 for (var j = 0; j < btrs.length; j++) { 28 var contents = {}; 29 var btds = Array.from(btrs[j].querySelectorAll("td")); 30 for (var i = 0; i < btds.length; i++) { 31 for (var key in titles) { 32 //修改:預設欄位data-field+i,相容部分資料表格中不存在data-field值的問題 33 var field = 'data-field' + i; 34 if (field === key) { 35 //根據表頭欄位獲取table內容欄位 36 contents[field] = btds[i].innerText; 37 } 38 } 39 } 40 bodysArr.push(contents) 41 } 42 //將標題行置頂新增到陣列 43 bodysArr.unshift(titles); 44 //匯出excel 45 excel.exportExcel({ 46 sheet1: bodysArr 47 }, '使用者表' + new Date().toLocaleString() + '.xlsx', 'xlsx'); 48 }
如圖
這樣就完美解決了,原理是 隱藏自帶的 工具欄圖示,然後重寫工具欄圖示,除了匯出Excel外 其他兩個都是呼叫原生layui的方法。匯出Excel呼叫的是 加入的擴充套件方法。這裡是為了相容IE 的寫法
1 if (!Array.from) { 2 Array.from = function (el) { 3 return Array.apply(this, el); 4 } 5 }