File tree Expand file tree Collapse file tree
for-tests/extensions/print Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1+ < script >
2+ init ( {
3+ title : 'Print footer with rowspan/colspan' ,
4+ desc : 'Test print footer with grouped column headers (rowspan/colspan).' ,
5+ links : [
6+ 'bootstrap-table.min.css'
7+ ] ,
8+ scripts : [
9+ 'bootstrap-table.min.js' ,
10+ 'extensions/print/bootstrap-table-print.min.js'
11+ ]
12+ } )
13+ </ script >
14+
15+ < table
16+ id ="table "
17+ data-show-print ="true "
18+ data-show-footer ="true ">
19+ < thead >
20+ < tr >
21+ < th colspan ="2 "> Item Detail</ th >
22+ < th data-field ="id " rowspan ="2 " data-footer-formatter ="totalIdFormatter "> ID</ th >
23+ </ tr >
24+ < tr >
25+ < th data-field ="name "> Name</ th >
26+ < th data-field ="price " data-footer-formatter ="totalPriceFormatter "> Price</ th >
27+ </ tr >
28+ </ thead >
29+ </ table >
30+
31+ < script >
32+ function mounted ( ) {
33+ $ ( '#table' ) . bootstrapTable ( {
34+ data : [
35+ { id : 1 , name : 'Item 1' , price : 100 } ,
36+ { id : 2 , name : 'Item 2' , price : 200 } ,
37+ { id : 3 , name : 'Item 3' , price : 300 }
38+ ]
39+ } )
40+ }
41+
42+ window . totalPriceFormatter = data => `$${ data . reduce ( ( sum , item ) => sum + item . price , 0 ) } `
43+ window . totalIdFormatter = data => `${ data . length } items`
44+ </ script >
You can’t perform that action at this time.
0 commit comments