bootstraptable 的宽度

2018-03-23 19:38:20 u013194063 阅读数 36302
首先为table 设置 style="table-layoutfixed;"
 <table id="assessStage" data-height="467" data-mobile-responsive="true" style="table-layout: fixed;">
                </table>
然后在下方columns 处设置width
$('#assessStage').bootstrapTable({
            method: 'get',
            url: "xxx",
            btn: true,
            pagination: true,
            pageSize: 10,
            pageNumber: 1,
            pageList: [10, 15, 30],//分页步进值
            striped: true,
            dataField: "list",
            iconSize: 'outline',
            icons: {
                refresh: 'glyphicon-repeat',
                toggle: 'glyphicon-list-alt',
                columns: 'glyphicon-list'
            },
            columns: [
                [
                    {
                        field: 'student_name',
                        title: '姓名',
                        align: 'center',
                        colspan: 1
                        ,width:100
                    },
                    {
                        field: 'hospital_name',
                        title: '带教单位',
                        align: 'center',
                        colspan: 1
                        ,width:200
                    },
                    {
                        field: 'teacher_name',
                        title: '指导老师',
                        align: 'center',
                        colspan: 1
                        ,width:100
                    },
                    {
                        field: 'start_time',
                        title: '开始时间',
                        align: 'center',
                        colspan: 1,
                        width:100
                    }
                ]
            ]
        });



2019-04-17 12:23:38 weixin_42305140 阅读数 2525

需求:"设备名称" 字段和"说明" 字段显示不全使用...显示,鼠标悬停显示全部内容

 没设置之前的样子:

 原因:没设置之前,bootstrapTable有自适应功能,会随着你文本的长度自动调整宽度和长度

解决方法:1、    给table标签加样式,style="word-wrap:break-all;word-break:break-all;table-layout:fixed;"如下:

<table id="deviceNameTable" style="word-wrap:break-all;word-break:break-all;table-layout:fixed;" class="table table-condensed table-bordered table-hover table-strip"  data-toolbar="#toolbar" data-id-field="id"><table>

2、在table标签内设置每一列的宽度,使用  <colgroup>  <col style=""><col/></colgroup>标签如下:

<table id="deviceNameTable" style="word-wrap:break-all;word-break:break-all;table-layout:fixed;" class="table table-condensed table-bordered table-hover table-strip"  data-toolbar="#toolbar" data-id-field="id">

<!--使用设置每一列的宽度-->        
        <colgroup>
            <col style="width:5%;">
            <col style="width:5%;">
            <col style="width:20%;">
            <col style="width:20%;">
            <col style="width:20%;">
            <col style="width:5%;">            
            <col style="width:5%;">
            <col style="width:20%;">                
        </colgroup>
    </table>

3.在formatter下面设置返回样式,给title属性设置值可以出现鼠标悬停显示全部内容的效果,加入 style='overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width: 100%;'可以不换行,固定宽度显示,显示不全使用...,如下

,{
                field: 'remarks',
                title: '说明',
                sortable: true
                ,formatter:function(value, row , index){
                    return "<div title='"+value+"'; style='overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width: 100%;word-wrap:break-all;word-break:break-all;' href='javascript:edit(\""+row.id+"\",true)'>"+value+"</div>";
                }                
                
            }

这样就大功告成了。

2019-04-15 11:55:54 qq_41239650 阅读数 1263

这样直接写宽度无效

在这里插入图片描述
需要在页面上加入

table-layout:fixed: 表格固定宽度;
word-break:break-all : 此属性的含义是如果单元格内的数据在被列宽限制的情况下会换行显示。

2018-06-02 21:13:48 Smy_0114 阅读数 12085

本文参考此文章https://segmentfault.com/q/1010000009900107

  1. 表格字段非常多, 表格到页面宽度100%都显示不下

  2. 现在想让表格宽度按内容决定宽度。(页面出现滚动条没关系)

  3. 表格内容不要出现换行


<div class=table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th> ... </th>
                ....
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> ... </td>
                ....
            </tr>
            .....
        </tbody>
    </table>
</div>
其中,表格需要加table样式,text-nowrap控制内容不换行,表格外层必须有<div class="table-responsive">。表格里面的theadtbody不能省略,否则Bootstrap表格样式不会被使用。






2017-06-02 17:39:10 Aurevoir1993 阅读数 11663

一、bootstrapTable通过js加载方法:

1、html中代码:

<div class="table-body">
	<table id="hlxtable" class="tab"></table>
</div>
2、js中调用


$(function() {
initTable();
initDate();
});


function initDate(){
$('.date-picker').datepicker({autoclose:true}).next().on(ace.click_event, function(){
$(this).prev().focus();
});
$('input[name=date-range-picker]').daterangepicker().prev().on(ace.click_event, function(){
$(this).next().focus();
});
}
/**
 * 初始化表格数据
 */
function initTable(){
$('#hlxtable').bootstrapTable({
method : "GET",//请求方式
pagination : true,//分页
pageSize: 10,//每页大小
   pageNumber: 1,//初始化加载第一页
pageList: [5,10,50,100,200,500],  //允许选择的每页条数
sidePagination :  "server", //由服务器端完成分页功能
queryParams: queryParams,
queryParamsType: "limit",
//search: true,
url : basePath + 'views/pages/hlx/queryHlx.htm', // 获取数据的Servlet地址
columns : [  {
field : 'boxName',
align : 'center',
title : '汇流箱名称',
width : '100'
}, {
field : 'dataTime',
align : 'center',
title : '时间',
width : '200'
}, {
field : 'totalPower',
align : 'center',
title : '总功率',
width : '100'
}  , {
field : 'dl2',
align : 'center',
title : '一',
width : '100'
}, {
field : 'dl3',
align : 'center',
title : '二',
width : '100'
}, {
field : 'dl4',
align : 'center',
title : '电流4(A)',
width : '100'
}, {
field : 'dl5',
align : 'center',
title : '三',
width : '100'
}, {
field : 'dl6',
align : 'center',
title : '四',
width : '100'
}, {
field : 'dl7',
align : 'center',
title : '五',
width : '100'
}, {
field : 'dl8',
align : 'center',
title : '六',
width : '100'
}, {
field : 'dl9',
align : 'center',
title : '七',
width : '100'
}, {
field : 'dl10',
align : 'center',
title : '八',
width : '100'
}, {
field : 'dl11',
align : 'center',
title : '九',
width : '100'
}, {
field : 'dl16',
align : 'center',
title : '电流16(A)',
width : '100'
}]
});
}

至此js实现查询已完成。

二、bootstrap-table设置表头宽度无效的解决方案

1、首先将table的表头样式设置为固定的,然后在js中添加width宽度

.tab{
    table-layout: fixed;
}