前端开发 - BootstrapTable使用指南

最新推荐文章于 2022-07-24 15:57:08 发布

张念磊

最新推荐文章于 2022-07-24 15:57:08 发布

阅读量231

点赞数

本文链接：https://blog.csdn.net/Mr_Zhang____/article/details/104164980

版权

设置高度为灵活高度

添加高度属性

    height: $(window).height() * 0.68,

添加数据统计

分为两步：

第一步

    showFooter: true,

第二步

            footerFormatter: function (value) {
                var count = 0;
                for (var i in value){
                    count += parseFloat(value[i].hBorrow);
                }
                return xiaoshu(count);
            }

不显示某些列

        onLoadSuccess: function(){
            if(type == 2){
                $table.bootstrapTable('hideColumn', 'abstractName');
            }
        }

给每一行添加属性

    rowAttributes: function (row, index) {
        return {"data-acc": row.acc};
    }

完整示例代码

$('#table').bootstrapTable({
    // data:data,
    idField: 'id',
    dataType: 'jsonp',
    height: $(window).height() * 0.68,//设置高度为页面的68%
    showFooter: true,//设置启用统计功能
    columns: [
        {field: 'id', title: '科目代码', width: '150px',
            footerFormatter: function (value) {
                return "汇总";
            }},
        {field: 'subjectName', title: &