bootstrapextjs表格宽度自适应如何固定宽度或者自适应内容

反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。
这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧?
要实现这种布局,也算比较简单。我们先给出html结构:
12345& id=&wrap&&
& & id=&sidebar& style=&height:240&&固定宽度区&/&
& & id=&content& style=&height:340&&自适应区&/&
& id=&footer&&后面的一个DIV,以确保前面的定位不会导致后面的变形&/&
代码中的#wrap的div,是用来包裹我们要定位的这两个区的;他后面还有个#footer,用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了,那证明我们的定位方法必须改进。
下面列举几个常见的方法:
1,固定宽度区浮动,自适应区不设宽度而设置 margin
我们拿右边定宽左边自适应来做示范,CSS代码如下:
12345678910111213#wrap {
& & overflow: hidden; *zoom: 1;
& #content ,#sidebar {
& & background-color: #eee;
& #sidebar {
& & float: right; width: 300px;
& #content {
& & margin-right: 310px;
& #footer {background-color: #f00;color:#fff; margin-top: 1em}
其中,sidebar让他浮动,并设置了一个宽度;而content没有设置宽度。
大家要注意html中必须使用div标签,不要妄图使用什么p标签来达到目的。因为div有个默认属性,即如果不设置宽度,那他会自动填满他的父标签的宽度。这里的content就是例子。
当然我们不能让他填满了,填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在右边,所以我们设置content的margin-right值,值比sidebar的宽度大一点点——以便区分他们的范围。例子中是310.
假设content的默认宽度是100%,那么他设置了margin后,他的宽度就变成了100%-310,此时content发现自己的宽度可以与sidebar挤在同一行了,于是他就上来了。
而宽度100%是相对于他的父标签来的,如果我们改变了他父标签的宽度,那content的宽度也就会变——比如我们把浏览器窗口缩小,那wrap的宽度就会变小,而content的宽度也就变小——但,他的实际宽度100%-310始终是不会变的。
这个方法看起来很完美,只要我们记得清除浮动(这里我用了最简单的方法),那footer也不会错位。而且无论content和sidebar谁更长,都不会对布局造成影响.
但实际上这个方法有个很老火的限制——html中sidebar必须在content之前!
但我需要sidebar在content之后!因为我的content里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。
但如果sidebar在content之后,那上面的一切都会化为泡影。
可能有的人不理解,说你干嘛非要sidebar在后面呢?这个问题说来话长,反正问题就是——content必须在sidebar之前,但content宽度要自适应,怎么办?
下面有两个办法,不过我们先把html结构改成我们想要的样子:
1234& id=&wrap&&
& & id=&content& style=&height:340&&自适应区,在前面&/&
& & id=&sidebar& style=&height:240&&固定宽度区&/&
2,固定宽度区使用绝对定位,自适应区照例设置margin
我们把sidebar扔掉,只对content设置margin,那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说,我的宽度,与你无关。
content很容易就搞定了,此时来看看sidebar,他迫不得已抛弃了float。我们来看看sidebar的特点:在右边,宽度300,他的定位对content不影响——很明显,一个绝对主义分子诞生了。
于是我们的css如下:
123456789#wrap {
& & *zoom: 1; position: relative;
& #sidebar {
& & width: 300px; position: absolute; right: 0; top: 0;
& #content {
& & margin-right: 310px;
这段css中要注意给wrap加上了相对定位,以免sidebar太绝对了跑到整个网页的右上角而不是wrap的右上角。
好像完成了?在没有看footer的表现时,我很欣慰。我们来把sidebar加长——增长100px!不要一年,只要一条内裤!哦,,,只要一句代码。
但是,footer怎么还是在那儿呢?怎么没有自动往下走呢?footer说——我不给绝对主义者让位!
其实这与footer无关,而是因为wrap对sidebar的无视造成的——你再长,我还是没感觉。
看来这种定位方式只能满足sidebar自己,但对他的兄弟们却毫无益处。
3,float与margin齐上阵
经过前面的教训,我们重新确立了这个自适应宽度布局必须要达成的条件:
sidebar宽度固定,content宽度自适应
content要在sidebar之前
后面的元素要能正常定位,不能受影响
由于绝对定位会让其他元素无视他的存在,所以绝对定位的方式必须抛弃。
如果content和sidebar一样,都用float,那content的自适应宽度就没戏了;如果不给content加float,那sidebar又会跑到下一行去。
所以,最终我决定:float与margin都用。
我打算把content的宽度设为100%,然后设置float:left,最后把他向左移动310,以便于sidebar能挤上来。
但这么一来content里面的内容也会跟着左移310,导致被遮住了,所以我们要把他重新挤出来。为了好挤,我用了一个额外的div包裹住内容,所以html结构变成了这种样子:
12345678& id=&wrap&&
& & id=&content& style=&height:140&&
& & & id=&contentb&&
& & & content自适应区,在前面
& & id=&sidebar& style=&height:240&&sidebar固定宽度区&/&
css则变成这样:
123456789#sidebar {
& & width: 300px; float: right;
& #content {
& & margin-left: -310px; float: left; width: 100%;
& #contentb {
& & margin-left: 310px;
这样一改,真正的“content”就变成了contentb,他的宽度跟以前的content一样,是100%-310.
大家可能注意到了代码中的两个margin-left,一个-310px一个310px,最后结合起来相当于什么都没干,着实蛋疼。但他确实解决了content与sidebar的顺序问题。
这个方法的缺点就是:太怪异,以及额外多了一层div。
4,标准浏览器的方法
当然,以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了:把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-然后只给sidebar指定一个宽度,那么content的宽度就变成自适应了。
代码很少,而且不会有额外标签。不过这是IE7都无效的方法。
———————割尾巴————————-
如果不考虑ie7及以下版本,则使用标准方法;如果不在意sidebar与content的顺序,则用第一种方法;否则用第3种方法。
以上代码都没在IE6测试,有问题不负责解释。个人觉得,让IE6寿终正寝的办法就是——从此不再理他。
关于十年灯
Javascript工程师。好想转Nodejs,好想用es6博客分类:
在使用bootstrap 底部导航的时候遇到了一个问题 —— 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖
自己写了一个JS脚本,解决自适应的问题
&nav class="navbar navbar-default navbar-fixed-bottom"&
&div class="container-fluid margin_bottom_5 margin_top_5 clear_padding text-center"&
&button class="btn btn-e4005a" type="button" style="padding: 6px 30"&提交&/button&
$(function(){
autoNav();
//解决底部自动导航的问题
function autoNav(){
//获取内容的高度
var bodyHeight = $("body").height();
//获取底部导航的高度
var navHeight = $(".navbar").height();
//获取显示屏的高度
var iHeight = document.documentElement.clientHeight||document.body.clientH
//如果内容的高度大于(窗口的高度 - 导航的高度),z则需要添加一个div,设置其高度
if(bodyHeight & (iHeight - navHeight)){
$("body").append('&div style="height: '+navHeight+'px"&&/div&');
浏览: 2520411 次
来自: 长沙
请问,我添加自定义按钮为什么还是显示原有的按钮,能有一个dem ...
由CXF实现的微服务需要有比较好的工具去测试RESTful A ...
CSS文件在哪儿?
debug版本的apk没有问题,签名以后的apk 就不跳转链接 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'bootstrap中表格行高应该是为自适应高度吧,现在我一行高度特别高,一行有10行字体,我想把行高设置固定,多余的字体省略的该怎呢操作呢
<a data-traceid="question_detail_above_text_l&&
bootstrap中表格行高应该是为自适应高度吧,现在我一行高度特别高,一行有10行字体,我想把行高设置固定,多余的字体省略的该怎呢操作呢
明白吗 ,有操作过的大神们
在线等,弄了一下午了,工作效率太低了
see&https://stackoverflow.com/questions//bootstrap-3-wrap-text-content-within-div-for-horizontal-alignmentBootstrap 如何建立左侧固定宽度,右边自适应布局?
<a data-traceid="question_detail_above_text_l&&
刚开始接触Bootstrap,现在需要左右两栏布局,左栏固定布局宽240px,右侧自适应布局。查了手册,例子中要么全是固定布局,要么全是自适应布局,请问这个如何解决?请高手指点,谢谢。
请问楼主解决这个问题了吗?我现在也遇到这样的问题
左侧固定相对定位,右侧设置margin。
margin-left:200
建议不要设定固定宽度。
可以试试通过spanX布局设定位置,然后给这个div设定一个固定宽度来实现。
楼主参考一下这里:
最好在他既有机制上 进行改动,不要打破他的设计理念,我觉得是最好不过的了.
比如你可以更改他的栅格数 或栅格宽度
但是要注意各个设备不同分辨率下的效果了.
我觉得,你这个需求首先就不对, bootstrap是个响应式设计, 他是不设定固定高宽的.. 不然栅格系统岂不是形同虚设.
恐怕只能自定义css了
width: 240
*position:
margin: 0;
margin-left: 240当前位置:
BootStrap table表格插件自适应固定表头(超好用)
BootStrap table表格插件自适应固定表头(超好用)
这里有新鲜出炉的 Bootstrap v3 教程,程序狗速度看过来!Bootstrap Web 前端 CSS 框架Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范,它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目,包括 NASA 的 MSNBC(微软全国广播公司)的 Breaking News 都使用了该项目。这篇文章主要介绍了 BootStrap table 表格插件自适应固定表头 (超好用) 的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下首先是简单的页面形式,大家可以按照平常画表格的方式来创建 html 表格,然后通过 js 控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快)当然,也可以只在页面上放一个 table 标签,之后的所有数据和样式都通过 js 控制也是可以的,后面会说(优点方便控制修改数据,尤其是 ajax 方式获取的 json 格式,但是调整样式比较麻烦)ps:这个是插件的官网,里面有英文 api 和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/还有,使用前请引入 bootstrap 的相关 css,js,jQuery,以及 bootstrap-table 的 css,js 至少这 5 个基本文件一,html 表格方式例一:需求,简单的表格数据呈现,表头是两行,还有一个上下浮的箭头分析:很简单,只需要 html 就可以实现,按照常规的表格来画,添加上 bootstrap-table 独有的自定义属性即可,注意如果不使用 js 请在最开始的 table 标签中加上 data-togglehtml 代码:
data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover"
id="tableL01"
data-field="lhc" data-rowspan="2" data-align="center" data-valign="middle"
data-field="dr" data-colspan="3" data-align="center" data-valign="middle"
data-field="bz" data-colspan="3" data-align="center" data-valign="middle"
data-field="by" data-colspan="3" data-align="center" data-valign="middle"
data-field="drbq" data-align="center" data-valign="middle"
data-field="drtb" data-align="center" data-valign="middle"
data-field="drhb" data-align="center" data-valign="middle"
data-field="bzbq" data-align="center" data-valign="middle"
data-field="bztb" data-align="center" data-valign="middle"
data-field="bzhb" data-align="center" data-valign="middle"
data-field="bybq" data-align="center" data-valign="middle"
data-field="bytb" data-align="center" data-valign="middle"
data-field="byhb" data-align="center" data-valign="middle"
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
class='glyphicon glyphicon-arrow-down'
class='glyphicon glyphicon-arrow-up'
例二:需求,第二个表格后面有个显示进度的自定义单元格,并且第一行要求是做一个合计的统计展示,这两个功能需要用 js 来设定自定义行列html 代码:
data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover"
id="tableL02"
data-field="id" data-align="center" data-valign="middle"
data-field="gys" data-align="center" data-valign="middle"
data-field="pz" data-align="center" data-valign="middle"
data-field="rz" data-align="center" data-valign="middle"
data-field="mj" data-align="center" data-valign="middle"
data-field="bmdj" data-align="center" data-valign="middle"
data-field="drlm" data-align="center" data-valign="middle"
data-field="ljlm" data-align="center" data-valign="middle"
data-field="yjhl" data-align="center" data-valign="middle"
data-field="yjhjd" data-align="center" data-valign="middle" data-formatter="progress"
月计划完成进度
js 代码:&//声明用来统计合计(累计来煤,月计划)的变量var yjhArr=[];var ljlmArr=[];//显示进度条的自定义列function progress (value,row){var width=parseInt(row.yjhjd);var red='#e63737';var blue='#b6ccf4';yjhArr.push(row.yjhl);ljlmArr.push(row.ljlm);return "&div style='height:20border:1px solid #b6ccf4;'&&span style='display:float:width:"+width+"%;height:100%;background-color:"+&br&(width&=100?red:blue)+";'&"+value+"&/span&&/div&"}//计算合计数值的方法function yjhTotal(){var subyjh=0;var subljlm=0;var row=[];for(var i=0;i&yjhArr.length;i++){if(yjhArr[i]==""){yjhArr[i]=0;}subyjh+=parseFloat(yjhArr[i]);}for(var j=0;j&ljlmArr.length;j++){if(ljlmArr[j]==""){ljlmArr[j]=0;}subljlm+=parseFloat(ljlmArr[j]);}row.push({id:1,gys:'合计',pz:'',rz:'',mj:'',bmdj:'',drlm:'',ljlm:subljlm.toFixed(2),yjhl:subyjh,yjhjd:'107%'});return row}分析:自定义行列需要添加 data-formatter='方法名',其中 progress()方法中的参数 row,会在表格生成行的时候每生成一行就执行一次并将该行的对象传进来。二:js 方式通过这种方法,可以很方便的为表格设置参数,处理数据方面十分便捷,尤其是设置请求方式和地址时,不过这个项目暂时只是静态页面,有关数据的以后接触在写上来例一:同上例一html:
class="table table-striped table-bordered table-hover" id="tableL01"
js://表格插件(表一)开始$('#tableL01').bootstrapTable({
height: 268,
//模拟数据
columns: [[{
align: 'center',
valign: 'middle',
field: 'lhc',
title: '来耗存',
rowspan: 2
align: 'center',
valign: 'middle',
field: 'dr',
title: '当日',
colspan: 3
align: 'center',
valign: 'middle',
field: 'bz',
title: '本周',
colspan: 3
align: 'center',
valign: 'middle',
field: 'by',
title: '本月',
colspan: 3
align: 'center',
valign: 'middle',
field: 'drbq',
title: '本期'
align: 'center',
valign: 'middle',
field: 'drtb',
title: '同比',
formatter: trend
align: 'center',
valign: 'middle',
field: 'drhb',
title: '环比',
formatter: trend
align: 'center',
valign: 'middle',
field: 'bzbq',
title: '本期'
align: 'center',
valign: 'middle',
field: 'bztb',
title: '同比',
formatter: trend
align: 'center',
valign: 'middle',
field: 'bzhb',
title: '环比',
formatter: trend
align: 'center',
valign: 'middle',
field: 'bybq',
title: '本期'
align: 'center',
valign: 'middle',
field: 'bytb',
title: '同比',
formatter: trend
align: 'center',
valign: 'middle',
field: 'byhb',
title: '环比',
formatter: trend
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
lhc: '来存量',
drbq: '21341',
drtb: '0.21',
drhb: '0.33',
bzbq: '35624',
bztb: '1.62',
bzhb: '3.16',
bybq: '42613',
bytb: '2.78',
byhb: '1.59'
}]});//模拟数据结束//上下浮动箭头样式添加function trend(value, row) {
var trendIcon = row.id % 2 === 0 ? 'glyphicon glyphicon-arrow-down': 'glyphicon glyphicon-arrow-up';
return "&i class='" + trendIcon + "'&&/ i&" + value}//表格插件一结束分析:$('#tableL01').bootstrapTable({})是插件开始的标志,在其中添加表格的参数,然后在 data:是表格的数据,而 columns 中则是设置列参数以及表格数据的地方,其中这个项目有代表性的是表头分为两部分,因此需要在 columns 中加两个数组【{}】,【{}】。之前都写在一个数组里,而源代码遍历的是 columns 的 length例二:html 相同都是只需要一个带 id 的 table 标签即可js://表格插件(表二)开始//声明用来统计合计(累计来煤,月计划)的变量var yjhArr = [];var ljlmArr = [];$('#tableL02').bootstrapTable({
height: 268,
//模拟数据
columns: [{
align: 'center',
valign: 'middle',
field: 'id',
title: '序号'
align: 'center',
valign: 'middle',
field: 'gys',
title: '供应商'
align: 'center',
valign: 'middle',
field: 'pz',
title: '品种'
align: 'center',
valign: 'middle',
field: 'rz',
title: '热值'
align: 'center',
valign: 'middle',
field: 'mj',
title: '煤价'
align: 'center',
valign: 'middle',
field: 'bmdj',
title: '标煤单价'
align: 'center',
valign: 'middle',
field: 'drlm',
title: '当日来煤'
align: 'center',
valign: 'middle',
field: 'ljlm',
title: '累计来煤'
align: 'center',
valign: 'middle',
field: 'yjhl',
title: '月计划量'
align: 'center',
valign: 'middle',
field: 'yjhjd',
title: '月计划完成进度',
formatter: progress
gys: '双欣矿业',
pz: '低硫煤',
ljlm: '6686.08',
yjhl: '30000',
yjhjd: '22%'
gys: '伊泰股份',
pz: '工程煤',
ljlm: '51888.72',
yjhl: '70000',
yjhjd: '74%'
gys: '嘉远公司',
pz: '中高硫煤',
ljlm: '20041.86',
yjhl: '90000',
yjhjd: '100%'
gys: '爱地能源',
pz: '低硫煤',
ljlm: '5191.08',
yjhjd: '0%'
gys: '恒泰煤炭',
pz: '中高硫煤',
ljlm: '18265.56',
yjhjd: '0%'
gys: '恒泰煤炭',
pz: '中高硫煤',
ljlm: '18265.56',
yjhjd: '0%'
gys: '恒泰煤炭',
pz: '中高硫煤',
ljlm: '18265.56',
yjhjd: '0%'
}]});//模拟数据结束//显示进度条的自定义列function progress(value, row) {
var width = parseInt(row.yjhjd);
var red = '#e63737';
var blue = '#b6ccf4';
yjhArr.push(row.yjhl);
ljlmArr.push(row.ljlm);
return "&div style='height:20border:1px solid #b6ccf4;'&&span style='display:float:width:" + width + "%;height:100%;background-color:" + (width &= 100 ? red: blue) + ";'&" + value + "&/span&&/div&"}//计算合计数值的方法function yjhTotal() {
var subyjh = 0;
var subljlm = 0;
var row = [];
for (var i = 0; i & yjhArr.length; i++) {
if (yjhArr[i] == "") {
yjhArr[i] = 0;
subyjh += parseFloat(yjhArr[i]);
for (var j = 0; j & ljlmArr.length; j++) {
if (ljlmArr[j] == "") {
ljlmArr[j] = 0;
subljlm += parseFloat(ljlmArr[j]);
row.push({
gys: '合计',
ljlm: subljlm,
yjhl: subyjh,
yjhjd: '107%'
return row}这个其实和第一种方式差别不大,只不过把自定义列放在数据中设置罢了。比较好理解。而关于其他参数可以参考官网,数据是动态的如何添加网上也有不少例子,只要都放在. bootstrapTable({})中就可以了以上所述是小编给大家介绍的 BootStrap table 表格插件自适应固定表头 (超好用),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
与本文相关文章
暂无,快来抢沙发吧!

我要回帖

更多关于 表格宽度自适应 的文章

 

随机推荐