晗旭这个小伙子 2018-12-25 11:07
浏览 1056

bootstrapTable显示混乱

使用bootstrapTable时,发生了按钮和文字显示混乱的问题。图片说明

在Chrome环境运行,console上没有任何问题。
html页面如下

 <div id="toolbar" class="btn-group" style="margin-top:15px">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <div><table id="data-table"></table></div>

js页面如下

$('#data-table').bootstrapTable({

         toolbar:"#toolbar",
         striped: true,                      //是否显示行间隔色
         cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
         pagination: true,                   //是否显示分页(*)
         sortable: false,                     //是否启用排序
         sortOrder: "asc",                   //排序方式

         sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
         pageNumber:1,                       //初始化加载第一页,默认第一页
         pageSize: 10,                       //每页的记录行数(*)
         pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
         search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
         strictSearch: true,
         showColumns: true,                  //是否显示所有的列
         showRefresh: true,                  //是否显示刷新按钮
         minimumCountColumns: 1,             //最少允许的列数
         clickToSelect: true,                //是否启用点击选中行
         height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
         uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
         showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
         cardView: false,                    //是否显示详细视图
         detailView: false,                   //是否显示父子表
         columns: [{
             checkbox: true
         },{
             field: 'id',
             title: 'Item ID'
         }, {
             field: 'name',
             title: 'Item Name'
         }, {
             field: 'price',
             title: 'Item Price'
         }],
         data: [{
             id: 1,
             name: 'Item 1',
             price: '$1'
         }, {
             id: 2,
             name: 'Item 2',
             price: '$2'
         }]

});
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 素材场景中光线烘焙后灯光失效
    • ¥15 请教一下各位,为什么我这个没有实现模拟点击
    • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
    • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
    • ¥20 有关区间dp的问题求解
    • ¥15 多电路系统共用电源的串扰问题
    • ¥15 slam rangenet++配置
    • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
    • ¥15 ubuntu子系统密码忘记
    • ¥15 保护模式-系统加载-段寄存器