Skip to content

Commit be770ed

Browse files
wenzhixinwenzhixin
committed
Add export extension test HTML pages for Cypress tests
1 parent d48607d commit be770ed

12 files changed

Lines changed: 465 additions & 0 deletions

‎for-tests/extensions/export/export-customTypes.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script>
2+
init({
3+
title: 'Export Custom Types',
4+
desc: 'Test exportTypes with all supported built-in types.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/export/bootstrap-table-export.min.js'
11+
]
12+
})
13+
</script>
14+
15+
<table id="table">
16+
<thead>
17+
<tr>
18+
<th data-field="id">ID</th>
19+
<th data-field="name">Name</th>
20+
<th data-field="price">Price</th>
21+
</tr>
22+
</thead>
23+
</table>
24+
25+
<script>
26+
function mounted () {
27+
$('#table').bootstrapTable({
28+
showExport: true,
29+
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],
30+
data: [
31+
{ id: 1, name: 'Item 1', price: '$1' },
32+
{ id: 2, name: 'Item 2', price: '$2' },
33+
{ id: 3, name: 'Item 3', price: '$3' }
34+
]
35+
})
36+
}
37+
</script>

‎for-tests/extensions/export/export-dataType-all.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script>
2+
init({
3+
title: 'Export Data Type All',
4+
desc: 'Test exportDataType=all with pagination.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/export/bootstrap-table-export.min.js'
11+
]
12+
})
13+
</script>
14+
15+
<table id="table">
16+
<thead>
17+
<tr>
18+
<th data-field="id">ID</th>
19+
<th data-field="name">Name</th>
20+
<th data-field="price">Price</th>
21+
</tr>
22+
</thead>
23+
</table>
24+
25+
<script>
26+
function mounted () {
27+
const data = []
28+
29+
for (let i = 1; i <= 50; i++) {
30+
data.push({ id: i, name: `Item ${i}`, price: `$${i}` })
31+
}
32+
$('#table').bootstrapTable({
33+
showExport: true,
34+
exportDataType: 'all',
35+
pagination: true,
36+
pageSize: 10,
37+
data
38+
})
39+
}
40+
</script>

‎for-tests/extensions/export/export-dataType-selected.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script>
2+
init({
3+
title: 'Export Data Type Selected',
4+
desc: 'Test exportDataType=selected with checkbox selection.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/export/bootstrap-table-export.min.js'
11+
]
12+
})
13+
</script>
14+
15+
<table id="table">
16+
<thead>
17+
<tr>
18+
<th data-field="state" data-checkbox="true"></th>
19+
<th data-field="id">ID</th>
20+
<th data-field="name">Name</th>
21+
<th data-field="price">Price</th>
22+
</tr>
23+
</thead>
24+
</table>
25+
26+
<script>
27+
function mounted () {
28+
$('#table').bootstrapTable({
29+
showExport: true,
30+
exportDataType: 'selected',
31+
data: [
32+
{ id: 1, name: 'Item 1', price: '$1', state: false },
33+
{ id: 2, name: 'Item 2', price: '$2', state: false },
34+
{ id: 3, name: 'Item 3', price: '$3', state: false }
35+
]
36+
})
37+
}
38+
</script>

‎for-tests/extensions/export/export-events.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script>
2+
init({
3+
title: 'Export Events',
4+
desc: 'Test export-started and export-saved events.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/export/bootstrap-table-export.min.js'
11+
]
12+
})
13+
</script>
14+
15+
<table id="table">
16+
<thead>
17+
<tr>
18+
<th data-field="id">ID</th>
19+
<th data-field="name">Name</th>
20+
<th data-field="price">Price</th>
21+
</tr>
22+
</thead>
23+
</table>
24+
25+
<script>
26+
function mounted () {
27+
$('#table').bootstrapTable({
28+
showExport: true,
29+
data: [
30+
{ id: 1, name: 'Item 1', price: '$1' },
31+
{ id: 2, name: 'Item 2', price: '$2' }
32+
]
33+
})
34+
35+
$('#table').on('export-started.bs.table', function () {
36+
window._exportStarted = true
37+
})
38+
$('#table').on('export-saved.bs.table', function (e, data) {
39+
window._exportSaved = true
40+
window._exportedData = data
41+
})
42+
}
43+
</script>

‎for-tests/extensions/export/export-fileName-function.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script>
2+
init({
3+
title: 'Export fileName Function',
4+
desc: 'Test exportOptions.fileName as function.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/export/bootstrap-table-export.min.js'
11+
]
12+
})
13+
</script>
14+
15+
<table id="table">
16+
<thead>
17+
<tr>
18+
<th data-field="id">ID</th>
19+
<th data-field="name">Name</th>
20+
<th data-field="price">Price</th>
21+
</tr>
22+
</thead>
23+
</table>
24+
25+
<script>
26+
function mounted () {
27+
$('#table').bootstrapTable({
28+
showExport: true,
29+
exportOptions: {
30+
fileName () {
31+
return 'custom-export-name'
32+
}
33+
},
34+
data: [
35+
{ id: 1, name: 'Item 1', price: '$1' },
36+
{ id: 2, name: 'Item 2', price: '$2' }
37+
]
38+
})
39+
}
40+
</script>

‎for-tests/extensions/export/export-footer.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script>
2+
init({
3+
title: 'Export Footer',
4+
desc: 'Test exportFooter=true to include table footer in export.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/export/bootstrap-table-export.min.js'
11+
]
12+
})
13+
</script>
14+
15+
<table id="table">
16+
<thead>
17+
<tr>
18+
<th data-field="id">ID</th>
19+
<th data-field="name">Name</th>
20+
<th data-field="price">Price</th>
21+
</tr>
22+
</thead>
23+
<tfoot>
24+
<tr>
25+
<td>Total</td>
26+
<td></td>
27+
<td>$6</td>
28+
</tr>
29+
</tfoot>
30+
</table>
31+
32+
<script>
33+
function mounted () {
34+
$('#table').bootstrapTable({
35+
showExport: true,
36+
exportFooter: true,
37+
height: 400,
38+
data: [
39+
{ id: 1, name: 'Item 1', price: '$1' },
40+
{ id: 2, name: 'Item 2', price: '$2' },
41+
{ id: 3, name: 'Item 3', price: '$3' }
42+
]
43+
})
44+
}
45+
</script>

‎for-tests/extensions/export/export-forceExport.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script>
2+
init({
3+
title: 'Export forceExport',
4+
desc: 'Test forceExport column option to export hidden columns.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/export/bootstrap-table-export.min.js'
11+
]
12+
})
13+
</script>
14+
15+
<table id="table">
16+
<thead>
17+
<tr>
18+
<th data-field="id">ID</th>
19+
<th data-field="name">Name</th>
20+
<th data-field="price">Price</th>
21+
<th data-field="secret" data-visible="false" data-force-export="true">Secret</th>
22+
</tr>
23+
</thead>
24+
</table>
25+
26+
<script>
27+
function mounted () {
28+
$('#table').bootstrapTable({
29+
showExport: true,
30+
data: [
31+
{ id: 1, name: 'Item 1', price: '$1', secret: 's1' },
32+
{ id: 2, name: 'Item 2', price: '$2', secret: 's2' },
33+
{ id: 3, name: 'Item 3', price: '$3', secret: 's3' }
34+
]
35+
})
36+
}
37+
</script>

‎for-tests/extensions/export/export-forceHide.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script>
2+
init({
3+
title: 'Export forceHide',
4+
desc: 'Test forceHide column option to hide columns from export.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/export/bootstrap-table-export.min.js'
11+
]
12+
})
13+
</script>
14+
15+
<table id="table">
16+
<thead>
17+
<tr>
18+
<th data-field="id">ID</th>
19+
<th data-field="name">Name</th>
20+
<th data-field="price">Price</th>
21+
<th data-field="icon" data-force-hide="true">Icon</th>
22+
</tr>
23+
</thead>
24+
</table>
25+
26+
<script>
27+
function mounted () {
28+
$('#table').bootstrapTable({
29+
showExport: true,
30+
data: [
31+
{ id: 1, name: 'Item 1', price: '$1', icon: '⭐' },
32+
{ id: 2, name: 'Item 2', price: '$2', icon: '🔥' },
33+
{ id: 3, name: 'Item 3', price: '$3', icon: '✅' }
34+
]
35+
})
36+
}
37+
</script>

‎for-tests/extensions/export/export-method.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script>
2+
init({
3+
title: 'Export Method',
4+
desc: 'Test exportTable() method for programmatic export.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/export/bootstrap-table-export.min.js'
11+
]
12+
})
13+
</script>
14+
15+
<table id="table">
16+
<thead>
17+
<tr>
18+
<th data-field="id">ID</th>
19+
<th data-field="name">Name</th>
20+
<th data-field="price">Price</th>
21+
</tr>
22+
</thead>
23+
</table>
24+
25+
<button id="btn-export" class="btn btn-secondary">Export CSV</button>
26+
27+
<script>
28+
function mounted () {
29+
$('#table').bootstrapTable({
30+
data: [
31+
{ id: 1, name: 'Item 1', price: '$1' },
32+
{ id: 2, name: 'Item 2', price: '$2' }
33+
]
34+
})
35+
36+
$('#btn-export').click(function () {
37+
$('#table').bootstrapTable('exportTable', { type: 'csv' })
38+
})
39+
}
40+
</script>

0 commit comments

Comments
 (0)