1. AboutlayuiFor export method, just use the export method provided by layui (version 2.4.5 and above):
layui--layui-table export ExcelConvert to data table immediately
Convert data into static tables
Export Excel
Add a time signature to the nickname
Xianxin12016-11-28 Life is like a practice A Xianxin22016-11-29 Life is like a practice B Xianxin32016-11-30 Life is like a practice Cvar exportBillsData=[{
'nos':1,
'CompanyId':1001,
'CompanyName':"Ctrip",
'Sex':'Male'
},{
'nos':2,
'CompanyId':1002,
'CompanyName':"Ctrip 1",
'Sex':'Female'
}];
('table', function(){
var table = ;
});
//1. Convert to static table - bind data directly to layui-table
function convertToTable(){
('table', function () {
var table = ;
({
elem: '#table_TravelagenceCheck'
, height: 480
, title: "Details of the amount of contribution of the agreement"
, page: true
, size: 'sm'
, toolbar: "Agreement check-in details"
, defaultToolbar: ['filter', 'print', 'exports']
, limit: 200
, limits: [200]
//Bind data directly
, data: exportBillsData
, cols: [[ //Table header
{ field: 'nos', title: "serial number", width: '2%', type: 'numbers', unresize: true }
, { field: 'CompanyId', title: "Protocol No.", width: '10%', sort: true, unresize: true }
, { field: 'CompanyName', title: "Protocol Name", width: '12%', sort: true, unresize: true }
, { field: 'Sex', title: "Gender", width: '12%', sort: true, unresize: true }
]]
});
});
}
//Export Excel-Note: The method is built with layui-table, suitable for version 2.4.5, and version 2.3.0 does not have this method.
function exportToExcel(){
('table', function () {
var table = ;
(["Nickname", "Add time", "Signature"],[
['Xianxin1','2016-11-28','Life is like a practice A'],
['Xianxin 2','2019-11-28','Life is like a practice B'],
['Xianxin3','2016-10-28','Life is like a practice C']
],'The order list will be arrived today.xls');
});
}
//Export Excel1
function exportToExcel1(){
('table', function () {
var table = ;
(["#","account", "type", "name", "room type", "room number", "status", "transaction price",
"Balance", "Credit Amount", "Advance", "Leave", "Mobile Cell Phone", "Number of Rooms", "Link Room",
"VIP", "House Price Code", "Market Code", "Company", "Reservation Number", "Remarks"],[
['1','F1908090001','F','jackA302','Three-person room has windows Romantic','A302','R','120','400','0','0','2019-08-09 09:33','2019-08-30 12:00','1734***2827','1','-','BASE','Door-to-door individual guest','-','R1908090001','-'],
['2','F1908210008','F','jackG202','Twin Room Sea View','G202','R','501','0','0','0','2019-08-22 09:16','2019-08-30 12:00','1734***2827','1','-','-','BASE','Door Individual Guest','-','R1908210003','-'],
['3','F1908210012','F','Mr. Li/Mr. Li','Twin Room Sea View','-','R','501','0','0','0','2019-08-22 12:00','2019-08-23 12:00','1777***3792','1','-','-','BASE','Door Individual Guest','-','R1908210004','-'],
['4','F1908210030','F','Ding Xiaoshuai','High-end room 1.5 meters bed with window','-','R','31','0','0','0','2019-08-22 12:00','2019-08-23 14:00','1861***8299','1','-','-','VipGold','Central Recommended Check-in','-','190822021002062','[Guest Message: Test Results] [Use electronic voucher: 30 on the first night to get 30] [AliAPP Order] No free breakfast; daily room price: 2019-08-22:31.00'],
['5','F1908220001','F','Sha','Single room breakfast test','-','R','230','0','0','230','2019-08-22 12:00','2019-08-23 13:00','1317***1407','1','-','-','VipCard','Central recommended check-in,' UnionPay online payment','190822021002069','[Payed successfully] (UnitedPay online payment) [Android mobile order] No free breakfast; daily room price: 2019-08-22:230.00'],
['6','F1908220002','F','Jiao Renjie','Single Room Breakfast Test','D203','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','Door-to-door individual customers','-','R1908220001','self-service machine processing'],
['7','F1908220003','F','Jiao Renjie','Single Room Breakfast Test','D205','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','Door-to-door individual customers','-','R1908220002','Self-service machine processing'],
['8','F1908220004','F','Jiao Renjie','Single Room Breakfast Test','D206','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','Door-to-door individual customers','-','R1908220003','self-service machine processing'],
['9','F1908210038','F','Jiao Renjie','Twin Room Sea View','G208','R','0','0','0','0','2019-08-22 17:34','2019-08-23 17:34','1363***7594','1','-','-','BASE','Door-to-door individual customers','-','R1908210009','Self-service machine processing'],
['10','F1908220010','F','test fragrance','single room breakfast test','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','18','☆','-','BASE','door-to-door individual guest','-','R1908220004','-'],
['11','F1908220011','F','test fragrance','single room breakfast test','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','Door-to-door individual guest','-','R1908220004','-'],
['12','F1908220012','F','test fragrance','single room breakfast test','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','Door-to-door individual guest','-','R1908220004','-'],
['13','F1908220008','F','Sha','8. Superior Suite 2 meters bed with window','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','☆','VipCard','Central Member Reservation','UniversityPay Online Payment','190823021002006','[Payed Successfully](UnitPay Online Payment)[Android Mobile Order][Use electronic voucher: 1 room 1 night 30 to 30] No free breakfast; daily room price: 2019-08-23:430.00'],
['14','F1908220009','F','Sha','8. Superior Suite 2 meters beds with windows','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','-','VipCard','Central Recommended Check-in,' UnionPay Online Payment,'190823021002007']
],'The order list will be arrived today.xls');
});
}
Additional Notes:
Additional supplements: Reference address: /qq_38642674/article/details/88236045
Although the layui framework still has some shortcomings, I think it is already very excellent. Regarding the difference between the two, others have different opinions on the Internet. Today I encountered a very disgusting problem that made me feel uncomfortable. I would like to express my views on these two. First, I introduced it. Today, I found that the content of the layui object is as follows
There are probably only these modules, and there are many commonly used modules that everyone is familiar with.
Then I changed it to debug the content of the layui object as follows
The content is similar, but there are few modules missing and a few more external modules I have introduced myself. So I seem to understand a lot about the difference between the two.
First of all, after you introduce this, your() will not take effect. The advantage is that if you refer to some modules, you will not need to use modular writing methods, and you can use them directly in js files.
Then, after you introduce this, all references to your js layout module must be used with (), otherwise it will not be able to use it.
In a word, there are more modules, fewer modules, the former contains all modules of the latter.
Analysis: From the above comparison, we can see that if you want to use the export function of layui-table:
(1) Direct reference (will drink the module) export directly:
The method is as follows:
//Export Excel
function exportToExcel(){
('table', function () {
var table = ;
(["Nickname", "Add time", "Signature"],[
['Xianxin1','2016-11-28','Life is like a practice A'],
['Xianxin 2','2019-11-28','Life is like a practice B'],
['Xianxin3','2016-10-28','Life is like a practice C']
],'The order list will be arrived today.xls');
});
}
(2) Direct Quote
The method is as follows:
The source code is as follows:
layui--layui-table export ExcelConvert to data table immediately
Convert data into static tables
Export Excel
Add a time signature to the nickname
Xianxin12016-11-28 Life is like a practice A Xianxin22016-11-29 Life is like a practice B Xianxin32016-11-30 Life is like a practice Cvar exportBillsData=[{
'nos':1,
'CompanyId':1001,
'CompanyName':"Ctrip",
'Sex':'Male'
},{
'nos':2,
'CompanyId':1002,
'CompanyName':"Ctrip 1",
'Sex':'Female'
}];
('table', function(){
var table = ;
});
//Convert to static table
function convertToTable(){
('table', function () {
var table = ;
({
elem: '#table_TravelagenceCheck'
, height: 480
, title: "Details of the amount of contribution of the agreement"
, page: true
, size: 'sm'
, toolbar: "Agreement check-in details"
, defaultToolbar: ['filter', 'print', 'exports']
, limit: 200
, limits: [200]
//Bind data directly
, data: exportBillsData
, cols: [[ //Table header
{ field: 'nos', title: "serial number", width: '2%', type: 'numbers', unresize: true }
, { field: 'CompanyId', title: "Protocol No.", width: '10%', sort: true, unresize: true }
, { field: 'CompanyName', title: "Protocol Name", width: '12%', sort: true, unresize: true }
, { field: 'Sex', title: "Gender", width: '12%', sort: true, unresize: true }
]]
});
});
}
//Export Excel
function exportToExcels(){
//('table', function () {
var table = ;
(["Nickname", "Add time", "Signature"],[
['Xianxin1','2016-11-28','Life is like a practice A'],
['Xianxin 2','2019-11-28','Life is like a practice B'],
['Xianxin3','2016-10-28','Life is like a practice C']
],'The order list will be arrived today.xls');
// });
}
Summary: From the above reference, you can see that it is not used, you can export it by directly using it.
Note: When referring to version 2.4.5, its ownlayer.js is version 3.1.1; when referring to version 2.4.5, it comes with version 3.1.1!
After referring to version 2.4.5, the built-in version is from the version already introduced in the system. For example, after version 2.2, the former may overwrite the version introduced by the latter, and some effects will be different. I don't know if the 3.1.1 version covers the 2.2 version. . . .
Finally, attached: export of js native method:
The source code is as follows:
.btn_CacheExport{
display:block;
width:83px;
height:40px;
text-align: center;
position:center;
color:black;
background-color:#C0C0C0;
line-height: 26px;
border:1px solid #727373
}
Export json xls file using table tag
Export
Export
Export 30-300207 room status report
function tableToExcel(){
//Json data to be exported
const jsonData = [
{
name:'Passenger A',
phone:'123456',
email:'123@'
},
{
name: 'Cannon fodder B',
phone:'123456',
email:'123@'
},
{
name:'Bandit C',
phone:'123456',
email:'123@'
},
{
name:'Rogue Ding',
phone:'123456',
email:'123@'
},
]
//Column title
let str = '
Name, phone, email,';//Loop traversal, add tr tags for each row, and add td tags for each cell
for(let i = 0 ; i < ; i++ ){
str+='
';for(let item in jsonData[i]){
//Increase\tIn order not to allow the table to display scientific notation or other formats
str+=`
${ jsonData[i][item] + '\t'}`;}
str+='
';}
//Worksheet name
let worksheet = 'This is the exported Excel'
let uri = 'data:application/-excel;base64,';
//Downloaded formtemplatedata
let template = `
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http:///TR/REC-html40">
`;//Download Export 1: Use button button
// = uri + base64(template);//The Excel file exported in this way does not have a file name specified
//Download Export 2: Use the a tag, specify the download attribute of the a tag and the exported Excel file has a file name!!!
("excelOut2").download = "Export excel";//Specify the exported Excel file name
("excelOut2").href = uri + base64(template);//Use the download attribute of the a tag to specify the exported Excel file name
}
//Output base64 encoding
function base64 (s) { return (unescape(encodeURIComponent(s))) }
2. Layui table printing function
Layui's own printing function is not used, because the included printing function doesn't feel good, add a new title, so you can use a custom printingfunction：
You can add report header and footer.
Source code:
/*
* Layui print table custom function
*/
function printReport(tablelayid) {
hotelData = hotelData[0];
let hotelName = ;//Hotel name
let businessDate = parseJsonDate();//Business Date
let printer = ;//Print person
let printerTime = formatDateTime(, 14);//Print time
let reportName = "Report: 27-030205-The room rental status report on the same day";
let v = ("div");
let f = [`
Business Date: ${businessDate}
"
"th,td{line-height: 20px; padding: 9px 10px; border: 1px solid #ccc; text-align: center; font-size: 18px; color: #666;}",
"a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}",
"", ""].join("");
$(v).append($(".layui-table-box").find(".layui-table-header").html());
$(v).find("tr").after($("[lay-id=\"" + tablelayid + "\"] .-table-main table").html()); $(v).find("-table-patch").remove();
$(v).find(".layui-table-col-special").remove();
//The footer displays the printer and print time
let footer = [`
let h = ("Print window", "_blank");
(f + $(v).prop("outerHTML") + footer);
();
();
();
}
/**
* Export Excel
*/
function exportToExcel() {
let item = new Array('Guest name', 'room number', 'account', 'guest type code', 'guest type description', 'member card number', 'member card type', 'contract unit', 'status', 'room type code', 'room type description', 'transaction price', 'market price', 'central reservation', 'arrival date', 'departure date', 'share living');
let dateTime = getDay3(); //Time format: 2019-08-08
('table', function () {
var table = ;// `27-030205: Room rental status report on the day ${dateTime}
([item], exportReportData, `27-030205: Room rental status report on the same day ${dateTime}.xls`);
});
}
The effect is shown in the picture:
The above custom printing method: printReport() was found to be consistent after comparing it with the printing source code provided by layui.
The source code of the intercepted fragment of the layui in V2.4.5 is as follows:
switch ((e), (""), (), c) {
case "LAYTABLE_COLS":
s({
list:
function() {
var e = [];
return (function(t, i) {
&& "normal" == && ('
')}),
("")
} (),
done: function() {
("checkbox(LAY_TABLE_TOOL_COLS)",
function(e) {
var i = t(),
l = ,
n = ("key"),
r = ("parentkey");
(,
function(e, t) {
(t,
function(t, i) {
if (e + "-" + t === n) {
var d = ;
= !l,
('*[data-key="' + + "-" + n + '"]')[l ? "removeClass": "addClass"](y),
d != && (!l, r),
()
}
})
})
})
}
});
break;
case "LAYTABLE_EXPORT":
? ("The export function does not support IE, please useChromeExport with advanced browsers", this, {
tips: 3
}) : s({
list: function() {
return ['
Export to Csv file', 'Export to Excel file'].join("")} (),
done: function(e, i) {
("click",
function() {
var e = t(this).data("type");
(, null, e)
})
}
});
break;
case "LAYTABLE_PRINT":
var h = ("Print window", "_blank"),
f = [""].join(""),
v = t(());
(("table").html()),
("-table-patch").remove(),
(".layui-table-col-special").remove(),
(f + ("outerHTML")),
(),
(),
()
}