bootstrap table 相关

510 阅读1分钟

01 height属性

height属性,
如果按照官方的用法,写在table的行间,那么高度是.fixed-table-container.fixed-height 的高度;
如果是采用js生成的情况,则是对应生成表格id所在元素的高度。
如果要自适应页面高度来确定表格高度

02 横向滚动条对不齐的情况

 //scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
 //fixedBody.scrollHeight > fixedBody.clientHeight +this.$header.outerHeight() ?
 scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
 fixedBody.scrollHeight > fixedBody.clientHeight ? 
 getScrollBarWidth() : 0;

上面代码,注释掉的部分是源码中的判断方法,下面是修改的。 原博入口

之前找到一种方法是注释掉两行代码 我公司用的自己封装的query-table,采用这种方法有个弊端,就是当点击翻页或者查询按钮重新生成表格后仍会出现对不齐的问题。所以最后没采用这个方法。但是值得借鉴。 *注,按下面操作后,影响thead背景色的dom样式还要处理下,

if (this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
            //注释掉下面两行 取消表头初始化解决表头和内容不对齐问题
            //this.resetHeader();
            //padding += this.$header.outerHeight();
}

原博入口

03 纵向表格内出现滚动条自适应

首先需要设置height属性,其次在bootstrap的onLoadSuccess方法内添加判断: 1,数据小于页码显示的数量(默认10条)时,添加数据条数判断; 2,大于页面显示数量,根据屏幕分辨率设定默认显示条数。此处默认条数根据需求而改变。

04 bootstrap-table checkbox 根据返回值勾选

bootstrap table colums 写法

var columns = [{ 
    field : ‘checked’, 
    checkbox : true, 
    //直接绑定js函数 
    formatter : stateFormatter 
    }]

用colums 属性设置 显示的格式

//写在colums中就可以直接调用

function stateFormatter(value, row, index) { 
    if (row.state == true) 
    return { 
    disabled : true,//设置是否可用 
    checked : true//设置选中 
    }; 
    return value; 
} 

总结 可以看出bootstrap checkbox 返回是这样的一个结果对象

{ 
    disabled : true,//设置是否可用 
    checked : true//设置选中 
    }; 

但是 在通过bootstrap $(‘#Table’) .bootstrapTable(‘getAllSelections’) 获取选中的行时候 仍然可以获得到默认加载时选中的数据

原文:blog.csdn.net/sun89782780…