最近突然想自定义页脚的显示内容,把一些统计结果放进页脚显示。在网上找到一个方法,试了一下他的思路,成功了,感谢大神。
bootstrap-table.min.js总归就是一个js文件,可以在这里面适当修改。
将方法大致记录一下。
在开始之前,先说一下,如果在你的网页中,导入了bootstrap的中文包,即bootstrap-table-zh-CN.js,要先把他注释掉,不然你怎么修改都不会有变化。
利用谷歌浏览器或者360浏览器,一步步剥开外衣,最后会发现以下内容:
这里的内容是我已经修改了以后显示的,可以看见,我给他添加了一个时间的统计。
在这里可以看见,有一个叫"pagination-detail"的class属性,找到线索了。下一步,去bootstrap-table.min.js里找这个东西,怎么搜索我就不多说了。
会搜索到以下内容,不同版本的bootstrap,可能不太一样,大同小异:
var m = n.onlyInfoPagination ? n.formatDetailPagination(n.totalRows) : n.formatShowingRows(this.pageFrom, this.pageTo, n.totalRows,n.totalNotFiltered);
if (p.push("\n \n ").concat(m, "\n ")), !n.onlyInfoPagination) {
……
}
分析这附近的代码,你会发现,有一个叫formatShowingRows的函数至关重要。
接着搜索这个函数,能找到这个函数的结构。如下:
formatShowingRows: function(e, t, o,n) {
return void 0 !== n && 0 < n && n > o ? "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows (filtered from ").concat(n, " total rows)"): "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows")
},
没错,就是这里了,找到了。就是需要改这一部分内容。
通过分析上面两部分代码,我们可以发现,我们可以依样画葫芦,以现有的n.totalRows参数作为样本,将我们需要的参数添加进去。
通过搜索totalRows,经过分析流程,可以大概知道,他是这么生效的。
二、正推其实现流程
1、首先是定义这个变量:
paginationLoop: !0,
sidePagination: "client",
totalRows: 0, //看这
totalTimes: 0,
totalNotFiltered: 0,
2、然后是定义一个从后台接收传过来的值的变量:
totalField: "total", //看这
totalNotFilteredField: "totalNotFiltered",
dataField: "rows",
3、然后是将这个接收传值的变量,赋值给显示用的变量:
{
key: "load",
value: function(e) {
var t = !1,
o = e;
this.options.pagination && "server" === this.options.sidePagination && (this.options.totalRows = o[this.options.totalField]), //看这里
this.options.pagination && "server" === this.options.sidePagination && (this.options.totalNotFiltered = o[this.options.totalNotFilteredField]),
t = o.fixedScroll,
o = Array.isArray(o) ? o: o[this.options.dataField],
this.initData(o),
this.initSearch(),
this.initPagination(),
this.initBody(t)
}
},
4、这个时候,totalRows已经获得了从后台传回来的相关的数据,下一步就是显示,显示则通过之前说的那个函数:
var m = n.onlyInfoPagination ? n.formatDetailPagination(n.totalRows) : n.formatShowingRows(this.pageFrom, this.pageTo, n.totalRows,n.totalTimes, n.totalNotFiltered);
下面是这个函数的具体实现,实现里,这个o,就是 n.totalRows。
formatShowingRows: function(e, t, o,n) {
return void 0 !== n && 0 < n && n > o ? "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows (filtered from ").concat(n, " total rows)"): "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows")
},
好了,现在
三、添加我们需要的参数
根据第二部分的内容,我们将我需要的参数添加进去:
1、添加接收后台传值的参数
后台怎么传值过来,就不说了,这是controller的内容了。就跟传rows和total一模一样
totalField: "total",
totalNotFilteredField: "totalNotFiltered",
dataField: "rows",
totalTimesld: "mTimes", //这就是我添加的内容
2、添加用来显示的参数
paginationLoop: !0,
sidePagination: "client",
totalRows: 0,
totalTimes: 0, //这个就是用来显示的参数,初始值是0
3、将传过来的值赋值给显示的参数
{
key: "load",
value: function(e) {
var t = !1,
o = e;
this.options.pagination && "server" === this.options.sidePagination && (this.options.totalRows = o[this.options.totalField]),
this.options.pagination && "server" === this.options.sidePagination && (this.options.totalNotFiltered = o[this.options.totalNotFilteredField]),
this.options.totalTimes=o[this.options.totalTimesld], //看这里
t = o.fixedScroll,
o = Array.isArray(o) ? o: o[this.options.dataField],
this.initData(o),
this.initSearch(),
this.initPagination(),
this.initBody(t)
}
},
4、修改formatShowingRows函数,添加你所需要的函数
我顺便还做了一个判断,非空显示。m就是我给totalTimes留出的位置。
formatShowingRows: function(e, t, o,m, n) {
if(null!=m){
return void 0 !== n && 0 < n && n > o ? "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows (filtered from ").concat(n, " total rows) and ").concat(m, " hours"): "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows and ").concat(m, " hours")
}else{
return void 0 !== n && 0 < n && n > o ? "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows (filtered from ").concat(n, " total rows)"): "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows")
}
},
5、使用formatShowingRows函数。
没有截取上下文,自行分析吧。
var m = n.onlyInfoPagination ? n.formatDetailPagination(n.totalRows) : n.formatShowingRows(this.pageFrom, this.pageTo, n.totalRows,n.totalTimes, n.totalNotFiltered);
四、处理中文显示,修改bootstrap-table-zh-CN.js
上面的修改结束以后,是英文显示的,如果这个时候导入中文包,后面的内容就又没了。因此,需要对中文包的内容也进行修改。修改bootstrap-table-zh-CN.js。
在中文包中,也有一个叫formatShowingRows的函数,只需要对这类进行修改就行。搜索formatShowingRows。懒得解释了,直接上代码。
formatShowingRows: function formatShowingRows(pageFrom, pageTo, totalRows,totalTimes, totalNotFiltered) {
if (totalNotFiltered !== undefined && totalNotFiltered > 0 && totalNotFiltered > totalRows) {
if(totalTimes!=null){
return "\u663E\u793A\u7B2C ".concat(pageFrom, " \u5230\u7B2C ").concat(pageTo, " \u6761\u8BB0\u5F55\uFF0C\u603B\u5171 ").concat(totalRows, " \u6761\u8BB0\u5F55\uFF08\u4ECE ").concat(totalNotFiltered, " \u603B\u8BB0\u5F55\u4E2D\u8FC7\u6EE4\uFF09,总计 ").concat(totalTimes, " 小时");
}else{
return "\u663E\u793A\u7B2C ".concat(pageFrom, " \u5230\u7B2C ").concat(pageTo, " \u6761\u8BB0\u5F55\uFF0C\u603B\u5171 ").concat(totalRows, " \u6761\u8BB0\u5F55\uFF08\u4ECE ").concat(totalNotFiltered, " \u603B\u8BB0\u5F55\u4E2D\u8FC7\u6EE4\uFF09");
}
}
if(totalTimes!=null){
return "\u663E\u793A\u7B2C ".concat(pageFrom, " \u5230\u7B2C ").concat(pageTo, " \u6761\u8BB0\u5F55\uFF0C\u603B\u5171 ").concat(totalRows, " \u6761\u8BB0\u5F55,总计 ").concat(totalTimes, " 小时");
}else{
return "\u663E\u793A\u7B2C ".concat(pageFrom, " \u5230\u7B2C ").concat(pageTo, " \u6761\u8BB0\u5F55\uFF0C\u603B\u5171 ").concat(totalRows, " \u6761\u8BB0\u5F55");
}
},
结束。
最后感谢一下引用文章,贴在这里。
BootstrapTable 自定义页脚-footer