Skip to content

Commit 4fb820f

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

12 files changed

Lines changed: 477 additions & 0 deletions
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 Custom Types',
4+
desc: 'Test exportTypes with multiple supported types.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
10+
'bootstrap-table.min.js',
11+
'extensions/export/bootstrap-table-export.min.js'
12+
]
13+
})
14+
</script>
15+
16+
<table id="table">
17+
<thead>
18+
<tr>
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+
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],
31+
data: [
32+
{ id: 1, name: 'Item 1', price: '$1' },
33+
{ id: 2, name: 'Item 2', price: '$2' },
34+
{ id: 3, name: 'Item 3', price: '$3' }
35+
]
36+
})
37+
}
38+
</script>
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
10+
'bootstrap-table.min.js',
11+
'extensions/export/bootstrap-table-export.min.js'
12+
]
13+
})
14+
</script>
15+
16+
<table id="table">
17+
<thead>
18+
<tr>
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+
const data = []
29+
30+
for (let i = 1; i <= 50; i++) {
31+
data.push({ id: i, name: `Item ${i}`, price: `$${i}` })
32+
}
33+
$('#table').bootstrapTable({
34+
showExport: true,
35+
exportDataType: 'all',
36+
pagination: true,
37+
pageSize: 10,
38+
data
39+
})
40+
}
41+
</script>
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
10+
'bootstrap-table.min.js',
11+
'extensions/export/bootstrap-table-export.min.js'
12+
]
13+
})
14+
</script>
15+
16+
<table id="table">
17+
<thead>
18+
<tr>
19+
<th data-field="state" data-checkbox="true"></th>
20+
<th data-field="id">ID</th>
21+
<th data-field="name">Name</th>
22+
<th data-field="price">Price</th>
23+
</tr>
24+
</thead>
25+
</table>
26+
27+
<script>
28+
function mounted () {
29+
$('#table').bootstrapTable({
30+
showExport: true,
31+
exportDataType: 'selected',
32+
data: [
33+
{ id: 1, name: 'Item 1', price: '$1', state: false },
34+
{ id: 2, name: 'Item 2', price: '$2', state: false },
35+
{ id: 3, name: 'Item 3', price: '$3', state: false }
36+
]
37+
})
38+
}
39+
</script>
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
10+
'bootstrap-table.min.js',
11+
'extensions/export/bootstrap-table-export.min.js'
12+
]
13+
})
14+
</script>
15+
16+
<table id="table">
17+
<thead>
18+
<tr>
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+
data: [
31+
{ id: 1, name: 'Item 1', price: '$1' },
32+
{ id: 2, name: 'Item 2', price: '$2' }
33+
]
34+
})
35+
36+
$('#table').on('export-started.bs.table', function () {
37+
window._exportStarted = true
38+
})
39+
$('#table').on('export-saved.bs.table', function (e, data) {
40+
window._exportSaved = true
41+
window._exportedData = data
42+
})
43+
}
44+
</script>
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
10+
'bootstrap-table.min.js',
11+
'extensions/export/bootstrap-table-export.min.js'
12+
]
13+
})
14+
</script>
15+
16+
<table id="table">
17+
<thead>
18+
<tr>
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+
exportOptions: {
31+
fileName () {
32+
return 'custom-export-name'
33+
}
34+
},
35+
data: [
36+
{ id: 1, name: 'Item 1', price: '$1' },
37+
{ id: 2, name: 'Item 2', price: '$2' }
38+
]
39+
})
40+
}
41+
</script>
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
10+
'bootstrap-table.min.js',
11+
'extensions/export/bootstrap-table-export.min.js'
12+
]
13+
})
14+
</script>
15+
16+
<table id="table">
17+
<thead>
18+
<tr>
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+
<tfoot>
25+
<tr>
26+
<td>Total</td>
27+
<td></td>
28+
<td>$6</td>
29+
</tr>
30+
</tfoot>
31+
</table>
32+
33+
<script>
34+
function mounted () {
35+
$('#table').bootstrapTable({
36+
showExport: true,
37+
exportFooter: true,
38+
height: 400,
39+
data: [
40+
{ id: 1, name: 'Item 1', price: '$1' },
41+
{ id: 2, name: 'Item 2', price: '$2' },
42+
{ id: 3, name: 'Item 3', price: '$3' }
43+
]
44+
})
45+
}
46+
</script>
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 forceExport',
4+
desc: 'Test forceExport column option to export hidden columns.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
10+
'bootstrap-table.min.js',
11+
'extensions/export/bootstrap-table-export.min.js'
12+
]
13+
})
14+
</script>
15+
16+
<table id="table">
17+
<thead>
18+
<tr>
19+
<th data-field="id">ID</th>
20+
<th data-field="name">Name</th>
21+
<th data-field="price">Price</th>
22+
<th data-field="secret" data-visible="false" data-force-export="true">Secret</th>
23+
</tr>
24+
</thead>
25+
</table>
26+
27+
<script>
28+
function mounted () {
29+
$('#table').bootstrapTable({
30+
showExport: true,
31+
data: [
32+
{ id: 1, name: 'Item 1', price: '$1', secret: 's1' },
33+
{ id: 2, name: 'Item 2', price: '$2', secret: 's2' },
34+
{ id: 3, name: 'Item 3', price: '$3', secret: 's3' }
35+
]
36+
})
37+
}
38+
</script>
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 forceHide',
4+
desc: 'Test forceHide column option to hide columns from export.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
10+
'bootstrap-table.min.js',
11+
'extensions/export/bootstrap-table-export.min.js'
12+
]
13+
})
14+
</script>
15+
16+
<table id="table">
17+
<thead>
18+
<tr>
19+
<th data-field="id">ID</th>
20+
<th data-field="name">Name</th>
21+
<th data-field="price">Price</th>
22+
<th data-field="icon" data-force-hide="true">Icon</th>
23+
</tr>
24+
</thead>
25+
</table>
26+
27+
<script>
28+
function mounted () {
29+
$('#table').bootstrapTable({
30+
showExport: true,
31+
data: [
32+
{ id: 1, name: 'Item 1', price: '$1', icon: '⭐' },
33+
{ id: 2, name: 'Item 2', price: '$2', icon: '🔥' },
34+
{ id: 3, name: 'Item 3', price: '$3', icon: '✅' }
35+
]
36+
})
37+
}
38+
</script>
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
10+
'bootstrap-table.min.js',
11+
'extensions/export/bootstrap-table-export.min.js'
12+
]
13+
})
14+
</script>
15+
16+
<table id="table">
17+
<thead>
18+
<tr>
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+
<button id="btn-export" class="btn btn-secondary">Export CSV</button>
27+
28+
<script>
29+
function mounted () {
30+
$('#table').bootstrapTable({
31+
data: [
32+
{ id: 1, name: 'Item 1', price: '$1' },
33+
{ id: 2, name: 'Item 2', price: '$2' }
34+
]
35+
})
36+
37+
$('#btn-export').click(function () {
38+
$('#table').bootstrapTable('exportTable', { type: 'csv' })
39+
})
40+
}
41+
</script>

0 commit comments

Comments
 (0)