bootstrap-table使用详解 - 苏小十~

bootstrap-table使用详解

尴尬，标记果然到了一周之后。。。。

首先引入文件不必提，引入bootstrap和bootstrap-table

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>

有三种设置table的方式，以下：

1、对于静态的可以直接设置table

<table data-toggle="table">
    <thead>
        <tr>
            <th>Item ID</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
        </tr>
    </tbody>
</table>

2、设置远程的链接渲染table

<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name" data-width="60">Item Name</th>
            <th data-field="price"  data-formatter="functionName">Item Price</th>
        </tr>
    </thead>
</table>

这里的field是根据远程连接返回的不同key值来设置的，

data-width:设置这一列的宽度

data-formatter 设置的是这一列渲染的展示方法，如下：

function vestSatusFormatter(val,row,index){

if(val)

return \'<span title="\'+val+\'" >\'+val+\'</span>\'

else

return \'无数据\'

}

val对应这个field返回的值，row是这一行的所有数据，index对应的第几条数据（从0开始），return 返回的即前台用户看到的呈现结果；

3、通过table的id设置

<table  data-url="data1.json"></table> 
$(\'#table\').bootstrapTable(\'destroy\').bootstrapTable({
 url: \'data1.json\', // 改变当前table的链接 ，请求后台的URL（*）可以不需要
method: \'post\',    //请求方式（*）
toolbar: toolbar, //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: queryParams, //传递参数（*），这里应该返回一个object，即形如{param1:val1,param2:val2}
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 20, //每页的记录行数（*）
pageList: [20, 50, 100], //可供选择的每页的行数（*）
columns: [{
        field: \'id\',
        title: \'Item ID\'
    }, {
        field: \'name\',
        title: \'Item Name\'
    }, {
        field: \'price\',
        title: \'Item Price\'
    }, ]
});

　　根据搜索条件刷新table

$("#"+domId).bootstrapTable(\'destroy\').bootstrapTable({
        striped:true,
        sidePagination: \'server\',
        pagination:true,
        pageSize: 10,
        pageList: [10, 20, 50, 100, 200,400],
        queryParams: function(param){
            var query;  
            if(type && search){
                params[\'searchType\'] = “你的搜索值”;
                params[\'searchContent\'] = "你的搜索值";
            };
            query=params;
            $.extend(query,param);            
            return query;
        },
        formatLoadingMessage: function(){
          return \'正在加载...\';
        },
        formatNoMatches: function(){
          return \'没有找到数据~\';
        },
        formatShowingRows: function(pageFrom, pageTo, totalRows){
          return \'共\'+totalRows+\'条，显示\'+pageFrom+\'到\'+pageTo+\'条记录\';
        },
        formatRecordsPerPage: function (pageNumber) {
             return \'每页显示 \' + pageNumber + \' 条记录\';
        }
      });

另外的是涉及到后台返回的参数跟原框架的不同，修改

修改方法
 responseHandler:function (res) {
            return {
                rows:res.list  //返回的数据详情
                total:res.total_count, //总条数
            };
        },                

涉及到保存分页的问题可能会修改bootstrap-table.js源码,主要用到一个方法$(table).bootstrapTable(\'getOptions\')

在js里定义原型方法 

BootstrapTable.prototype.getPage = function (params) {

　　return {pageSize: this.options.pageSize, pageNumber: this.options.pageNumber};

}; //这个只是提供更简洁的一种方法，不一定需要，看个人情况

并且定义该方法 大概在3015行左右

var allowedMethods = [

\'getOptions\',\'getPage\',

\'getSelections\', \'getAllSelections\', \'getData\'

...

]

-----------------------------

下面可以利用该方法
function setOptions(table,sessionName) {
    //获取到当前页码的相关信息
    var options = $(table).bootstrapTable(\'getOptions\'),
        Obj = {
            "limit":options.pageSize,
            "offset":(options.pageNumber - 1)*options.pageSize,
            "sort":options.sortName,
            "order":options.sortOrder
        };    
}

最后的是一点展示方面的问题，毕竟是一枚前端仔，你懂得，

有些table比较高可以设置height控制头部固定，但是会影响拖拽的效果所以要加这一句

<table  class="data-table" data-height="600" ></table> 
$(window).resize(function () {
      $(\'#table\').bootstrapTable(\'resetView\');
   });

当然，如果你的th需要换行，需要这些设置

#table{
  table-layout: fixed;
}
#tabletd{
   word-break:break-all;
   word-wrap:break-word;
}
.fixed-table-container thead th .th-inner{
    white-space: pre-line !important;
}

暂时想到的只有这些，如果有什么不对的地方欢迎指出，蟹蟹~