晗旭这个小伙子 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 在C#方法中使用了.Refresh();刷新了控件,但是不是最新值
    • ¥30 求一下解题思路,完全不懂。
    • ¥30 关于#硬件工程#的问题:求一下解题思路
    • ¥15 运筹学对偶单纯行法构造扩充问题
    • ¥20 XP系统的老电脑一开机就提示找不到rundll.exe,付费求解
    • ¥15 milvus查询出来的score怎么转换成0-1之间的相似性
    • ¥15 lvgl V9移植到linux开发板
    • ¥15 VB.net中在窗体中创建一个button控件来关闭窗体,但是提示错误,我该怎么办
    • ¥15 网上下载好的程序但是arduinoIDE编程报错,运行不了,哪里出错了,能具体给改一下吗