Skip to content

Commit 196a480

Browse files
wenzhixinwenzhixin
committed
Update export to support bootstrap v4
1 parent 1f14ae7 commit 196a480

File tree

3 files changed

+99
-74
lines changed

3 files changed

+99
-74
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"scripts": {
2929
"grunt": "grunt",
3030
"postinstall": "opencollective postinstall || exit 0",
31-
"lint": "eslint src/bootstrap-table.js"
31+
"lint": "eslint src/bootstrap-table.js src/extensions/export/bootstrap-table-export.js"
3232
},
3333
"repository": {
3434
"type": "git",

‎src/bootstrap-table.js‎

Lines changed: 70 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -13,49 +13,59 @@
1313
bootstrapVersion = parseInt($.fn.dropdown.Constructor.VERSION, 10)
1414
} catch (e) {}
1515

16-
const Utils = {
17-
bs: {
18-
3: {
19-
buttonsClass: 'default',
20-
iconsPrefix: 'glyphicon',
21-
icons: {
22-
paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
23-
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
24-
refresh: 'glyphicon-refresh icon-refresh',
25-
toggleOff: 'glyphicon-list-alt icon-list-alt',
26-
toggleOn: 'glyphicon-list-alt icon-list-alt',
27-
columns: 'glyphicon-th icon-th',
28-
detailOpen: 'glyphicon-plus icon-plus',
29-
detailClose: 'glyphicon-minus icon-minus',
30-
fullscreen: 'glyphicon-fullscreen'
31-
},
32-
pullClass: 'pull',
33-
toobarDropdowHtml: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
34-
toobarDropdowItemHtml: '<li role="menuitem"><label>%s</label></li>',
35-
pageDropdownHtml: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
36-
pageDropdownItemHtml: '<li role="menuitem" class="%s"><a href="#">%s</a></li>'
16+
const bootstrap = {
17+
3: {
18+
iconsPrefix: 'glyphicon',
19+
icons: {
20+
paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
21+
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
22+
refresh: 'glyphicon-refresh icon-refresh',
23+
toggleOff: 'glyphicon-list-alt icon-list-alt',
24+
toggleOn: 'glyphicon-list-alt icon-list-alt',
25+
columns: 'glyphicon-th icon-th',
26+
detailOpen: 'glyphicon-plus icon-plus',
27+
detailClose: 'glyphicon-minus icon-minus',
28+
fullscreen: 'glyphicon-fullscreen'
3729
},
38-
4: {
39-
buttonsClass: 'secondary',
40-
iconsPrefix: 'fa',
41-
icons: {
42-
paginationSwitchDown: 'fa-toggle-down',
43-
paginationSwitchUp: 'fa-toggle-up',
44-
refresh: 'fa-refresh',
45-
toggleOff: 'fa-toggle-off',
46-
toggleOn: 'fa-toggle-on',
47-
columns: 'fa-th-list',
48-
detailOpen: 'fa-plus',
49-
detailClose: 'fa-minus',
50-
fullscreen: 'fa-arrows-alt'
51-
},
52-
pullClass: 'float',
53-
toobarDropdowHtml: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
54-
toobarDropdowItemHtml: '<label class="dropdown-item">%s</label>',
55-
pageDropdownHtml: ['<div class="dropdown-menu">', '</div>'],
56-
pageDropdownItemHtml: '<a class="dropdown-item %s" href="#">%s</a>'
30+
classes: {
31+
buttons: 'default',
32+
pull: 'pull'
33+
},
34+
html: {
35+
toobarDropdow: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
36+
toobarDropdowItem: '<li role="menuitem"><label>%s</label></li>',
37+
pageDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
38+
pageDropdownItem: '<li role="menuitem" class="%s"><a href="#">%s</a></li>'
5739
}
58-
}[bootstrapVersion],
40+
},
41+
4: {
42+
iconsPrefix: 'fa',
43+
icons: {
44+
paginationSwitchDown: 'fa-toggle-down',
45+
paginationSwitchUp: 'fa-toggle-up',
46+
refresh: 'fa-refresh',
47+
toggleOff: 'fa-toggle-off',
48+
toggleOn: 'fa-toggle-on',
49+
columns: 'fa-th-list',
50+
detailOpen: 'fa-plus',
51+
detailClose: 'fa-minus',
52+
fullscreen: 'fa-arrows-alt'
53+
},
54+
classes: {
55+
buttons: 'secondary',
56+
pull: 'float'
57+
},
58+
html: {
59+
toobarDropdow: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
60+
toobarDropdowItem: '<label class="dropdown-item">%s</label>',
61+
pageDropdown: ['<div class="dropdown-menu">', '</div>'],
62+
pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>'
63+
}
64+
}
65+
}[bootstrapVersion]
66+
67+
const Utils = {
68+
bootstrapVersion,
5969

6070
// it only does '%s', and return '' when arguments are undefined
6171
sprintf (str, ...args) {
@@ -92,10 +102,10 @@
92102
}
93103

94104
for (let i = 0; i < columns.length; i++) {
95-
flag[i] = [];
96-
for (let j = 0; j < totalCol; j++) {
97-
flag[i][j] = false;
98-
}
105+
flag[i] = []
106+
for (let j = 0; j < totalCol; j++) {
107+
flag[i][j] = false
108+
}
99109
}
100110

101111
for (let i = 0; i < columns.length; i++) {
@@ -332,9 +342,9 @@
332342
searchTimeOut: 500,
333343
searchText: '',
334344
iconSize: undefined,
335-
buttonsClass: Utils.bs.buttonsClass,
336-
iconsPrefix: Utils.bs.iconsPrefix, // glyphicon or fa(font-awesome)
337-
icons: Utils.bs.icons,
345+
buttonsClass: bootstrap.classes.buttons,
346+
iconsPrefix: bootstrap.iconsPrefix, // glyphicon or fa(font-awesome)
347+
icons: bootstrap.icons,
338348
customSearch: $.noop,
339349
customSort: $.noop,
340350
ignoreClickToSelectOn (element) {
@@ -942,7 +952,7 @@
942952

943953
if (index !== -1) {
944954
if (this.options.sortStable) {
945-
this.data.forEach(row => {
955+
this.data.forEach((row, i) => {
946956
row._position = i
947957
})
948958
}
@@ -1061,14 +1071,14 @@
10611071
this.$toolbar.html('')
10621072

10631073
if (typeof this.options.toolbar === 'string' || typeof this.options.toolbar === 'object') {
1064-
$(Utils.sprintf('<div class="bs-bars %s-%s"></div>', Utils.bs.pullClass, this.options.toolbarAlign))
1074+
$(Utils.sprintf('<div class="bs-bars %s-%s"></div>', bootstrap.classes.pull, this.options.toolbarAlign))
10651075
.appendTo(this.$toolbar)
10661076
.append($(this.options.toolbar))
10671077
}
10681078

10691079
// showColumns, showToggle, showRefresh
10701080
html = [Utils.sprintf('<div class="columns columns-%s btn-group %s-%s">',
1071-
this.options.buttonsAlign, Utils.bs.pullClass, this.options.buttonsAlign)]
1081+
this.options.buttonsAlign, bootstrap.classes.pull, this.options.buttonsAlign)]
10721082

10731083
if (typeof this.options.icons === 'string') {
10741084
this.options.icons = Utils.calculateObjectValue(null, this.options.icons)
@@ -1114,7 +1124,7 @@
11141124
Utils.sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.columns),
11151125
' <span class="caret"></span>',
11161126
'</button>',
1117-
Utils.bs.toobarDropdowHtml[0])
1127+
bootstrap.html.toobarDropdow[0])
11181128

11191129
$.each(this.columns, (i, column) => {
11201130
if (column.radio || column.checkbox) {
@@ -1128,13 +1138,13 @@
11281138
const checked = column.visible ? ' checked="checked"' : ''
11291139

11301140
if (column.switchable) {
1131-
html.push(Utils.sprintf(Utils.bs.toobarDropdowItemHtml,
1141+
html.push(Utils.sprintf(bootstrap.html.toobarDropdowItem,
11321142
Utils.sprintf('<input type="checkbox" data-field="%s" value="%s"%s> %s',
11331143
column.field, i, checked, column.title)))
11341144
switchableCount++
11351145
}
11361146
})
1137-
html.push(Utils.bs.toobarDropdowHtml[1], '</div>')
1147+
html.push(bootstrap.html.toobarDropdow[1], '</div>')
11381148
}
11391149

11401150
html.push('</div>')
@@ -1182,7 +1192,7 @@
11821192
if (this.options.search) {
11831193
html = []
11841194
html.push(
1185-
Utils.sprintf('<div class="%s-%s search">', Utils.bs.pullClass, this.options.searchAlign),
1195+
Utils.sprintf('<div class="%s-%s search">', bootstrap.classes.pull, this.options.searchAlign),
11861196
Utils.sprintf(`<input class="form-control${Utils.sprintf(' input-%s', this.options.iconSize)}" type="text" placeholder="%s">`,
11871197
this.options.formatSearch()),
11881198
'</div>')
@@ -1367,7 +1377,7 @@
13671377
}
13681378

13691379
html.push(
1370-
Utils.sprintf('<div class="%s-%s pagination-detail">', Utils.bs.pullClass, this.options.paginationDetailHAlign),
1380+
Utils.sprintf('<div class="%s-%s pagination-detail">', bootstrap.classes.pull, this.options.paginationDetailHAlign),
13711381
'<span class="pagination-info">',
13721382
this.options.onlyInfoPagination ? this.options.formatDetailPagination(this.options.totalRows)
13731383
: this.options.formatShowingRows(this.pageFrom, this.pageTo, this.options.totalRows),
@@ -1386,7 +1396,7 @@
13861396
'</span>',
13871397
' <span class="caret"></span>',
13881398
'</button>',
1389-
Utils.bs.pageDropdownHtml[0]
1399+
bootstrap.html.pageDropdown[0]
13901400
]
13911401

13921402
if (typeof this.options.pageList === 'string') {
@@ -1408,16 +1418,16 @@
14081418
} else {
14091419
active = page === this.options.pageSize ? 'active' : ''
14101420
}
1411-
pageNumber.push(Utils.sprintf(Utils.bs.pageDropdownItemHtml, active, page))
1421+
pageNumber.push(Utils.sprintf(bootstrap.html.pageDropdownItem, active, page))
14121422
}
14131423
})
1414-
pageNumber.push(`${Utils.bs.pageDropdownHtml[1]}</span>`)
1424+
pageNumber.push(`${bootstrap.html.pageDropdown[1]}</span>`)
14151425

14161426
html.push(this.options.formatRecordsPerPage(pageNumber.join('')))
14171427
html.push('</span>')
14181428

14191429
html.push('</div>',
1420-
Utils.sprintf('<div class="%s-%s pagination">', Utils.bs.pullClass, this.options.paginationHAlign),
1430+
Utils.sprintf('<div class="%s-%s pagination">', bootstrap.classes.pull, this.options.paginationHAlign),
14211431
`<ul class="pagination${Utils.sprintf(' pagination-%s', this.options.iconSize)}">`,
14221432
Utils.sprintf('<li class="page-item page-pre"><a class="page-link" href="#">%s</a></li>',
14231433
this.options.paginationPreText))

‎src/extensions/export/bootstrap-table-export.js‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,27 @@
66
($ => {
77
const Utils = $.fn.bootstrapTable.utils
88

9+
const bootstrap = {
10+
3: {
11+
icons: {
12+
export: 'glyphicon-export icon-share'
13+
},
14+
html: {
15+
dropmenu: '<ul class="dropdown-menu" role="menu"></ul>',
16+
dropitem: '<li role="menuitem" data-type="%s"><a href="javascript:">%s</a></li>'
17+
}
18+
},
19+
4: {
20+
icons: {
21+
export: 'fa-download'
22+
},
23+
html: {
24+
dropmenu: '<div class="dropdown-menu dropdown-menu-right"></div>',
25+
dropitem: '<a class="dropdown-item" data-type="%s" href="javascript:">%s</a>'
26+
}
27+
}
28+
}[Utils.bootstrapVersion]
29+
930
const TYPE_NAME = {
1031
json: 'JSON',
1132
xml: 'XML',
@@ -29,10 +50,7 @@
2950
})
3051

3152
$.extend($.fn.bootstrapTable.defaults.icons, {
32-
export: {
33-
3: 'glyphicon-export icon-share',
34-
4: 'fa-download'
35-
}[Utils.bootstrapVersion]
53+
export: bootstrap.icons.export
3654
})
3755

3856
$.extend($.fn.bootstrapTable.locales, {
@@ -69,8 +87,7 @@
6987
<i class="${o.iconsPrefix} ${o.icons.export}"></i>
7088
<span class="caret"></span>
7189
</button>
72-
${Utils.bs.toobarDropdowHtml[0]}
73-
${Utils.bs.toobarDropdowHtml[1]}
90+
${bootstrap.html.dropmenu}
7491
</div>
7592
`).appendTo($btnGroup)
7693

@@ -83,15 +100,11 @@
83100
}
84101
for (let type of exportTypes) {
85102
if (TYPE_NAME.hasOwnProperty(type)) {
86-
const item = Utils.bootstrapVersion === 4
87-
? TYPE_NAME[type] : `<a href="javascript:void(0)">${TYPE_NAME[type]}</a>`
88-
const $item = $(Utils.sprintf(Utils.bs.toobarDropdowItemHtml, item))
89-
$item.attr('data-type', type)
90-
$menu.append($item)
103+
$menu.append(Utils.sprintf(bootstrap.html.dropitem, type, TYPE_NAME[type]))
91104
}
92105
}
93106

94-
$menu.find('>li, >label').click(e => {
107+
$menu.find('>li, >a').click(e => {
95108
const type = $(e.currentTarget).data('type')
96109
const doExport = () => {
97110
const data = this.getData()
@@ -130,7 +143,9 @@
130143
const stateField = this.header.stateField
131144

132145
if (o.exportDataType === 'all' && o.pagination) {
133-
this.$el.one(o.sidePagination === 'server' ? 'post-body.bs.table' : 'page-change.bs.table', () => {
146+
const eventName = o.sidePagination === 'server'
147+
? 'post-body.bs.table' : 'page-change.bs.table'
148+
this.$el.one(eventName, () => {
134149
if (stateField) {
135150
this.hideColumn(stateField)
136151
}

0 commit comments

Comments
 (0)