bootstrap-table使用简记

之前在看一个zheng项目的时候，感觉设计的后台界面让人感觉很舒适，仔细查看了一下技术栈，使用的bootstrap-table插件。简单说一下它的优缺点吧：

1.界面采用扁平化的风格，用户体验比较好，更好兼容各种客户端。这点也是最重要的。

2.里面集成的自定义组件设计和状态转换很是不错，可以和EJB系列的Primeface有一拼，并且方便组件的自由组合，也没有给人的笨重感，最重要的是开源啊。

3.相对于EasyUI等来说，更加轻量，但就是功能不够全面，基本上够用了。

1.官网

http://bootstrap-table.wenzhixin.net.cn/zh-cn/

里面有对应的文档和相关的全面的使用示例，足以使你明白他的使用方法。

2.引用方法

<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>  
<script src="bootstrap-table-zh-CN.js"></script> 

ps：最后的js文件是中文提示文字，如果不引用默认的使用英文。

3.基本使用方法

使用data属性的方式

作为bootstrap的扩展依然继承bootstrap的老传统，给标签添加扩展属性来实现对应的功能。

无需编写 JavaScript 启用 bootstrap table，我们对普通的 table 设置  data-toggle="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>

加载json格式文件

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

通过js来加载

<table id="table"></table>

$('#table').bootstrapTable({
    columns: [{
        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'
    }]
});

通过url来加载json文件中的数据

$('#table').bootstrapTable({
    url: 'data1.json', 
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }],    
});

4.引入font文件

一些图标需要用到bootstrap里面的文件，要从下载的bootstrap包里面拷贝过来放到对应的目录（看错误提醒）。

但是只放进去是访问不了的，因为他不是普通的文件，所以要设置。

进入iis管理器，找到“MIME类型”，双击进去，在右边菜单点击“添加”，分别添加以下类型：

.woff  
application/x-font-woff  
  
.woff2            
application/x-font-woff  

再刷新页面就可以加载fonts里面这些文件了。

5.定制组件

(function () {  
    function init(table,url,params,titles,hasCheckbox,toolbar) {  
        $(table).bootstrapTable({  
            url: url,                           //请求后台的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],            //可供选择的每页的行数（*）  
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大  
            strictSearch: true,  
            showColumns: true,                  //是否显示所有的列  
            showRefresh: true,                  //是否显示刷新按钮  
            minimumCountColumns: 2,             //最少允许的列数  
            clickToSelect: true,                //是否启用点击选中行  
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度  
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列  
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮  
            cardView: false,                    //是否显示详细视图  
            detailView: false,                  //是否显示父子表  
  
            columns: createCols(params,titles,hasCheckbox),  
            data: [{  
                id: 1,  
                name: 'Item 1',  
                price: '$1'  
            }, {  
                id: 2,  
                name: 'Item 2',  
                price: '$2'  
            }]  
        });  
    }  
    function createCols(params,titles,hasCheckbox) {  
        if(params.length!=titles.length)  
            return null;  
        var arr = [];  
        if(hasCheckbox)  
        {  
            var objc = {};  
            objc.checkbox = true;  
            arr.push(objc);  
        }  
        for(var i = 0;i<params.length;i++)  
        {  
            var obj = {};  
            obj.field = params[i];  
            obj.title = titles[i];  
            arr.push(obj);  
        }  
        return arr;  
    }  
    //可发送给服务端的参数：limit->pageSize,offset->pageNumber,search->searchText,sort->sortName(字段),order->sortOrder('asc'或'desc')  
    function queryParams(params) {  
        return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的  
            limit: params.limit,   //页面大小  
            offset: params.offset  //页码  
            //name: $("#txt_name").val()//关键字查询  
        };  
    }  
    // 传'#table'  
    createBootstrapTable = function (table,url,params,titles,hasCheckbox,toolbar) {  
        init(table,url,params,titles,hasCheckbox,toolbar);  
    }  
  
})();  

更加详细的组件列表及其具体功能在 官方文档