bootstrap-table 的常用方法

一、载入插件

1、官方网址：https://bootstrap-table.com
2、官方文档：https://bootstrap-table.com/docs/api/table-options
3、载入，首先基于bootstrap.css 和jquery.js，然后引入如下三个文件即可：

css引入：
<link rel="stylesheet" href="./bootstrap-table/dist/bootstrap-table.min.css">
js引入：
<script src="./bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="./bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

二、基本用法
1、数据请求接口：/article/index/
2、返回数据为json格式如下：

{
    total：120，
    rows: {
        0: {id:1, title: "标题一", create_time: "2020-03-15 20:00:00"},
        1: {id:2, title: "标题二", create_time: "2020-03-15 20:00:00"},
        2: {id:3, title: "标题三", create_time: "2020-03-15 20:00:00"},
        ......
    }
}
注： 此为bootstrap-table.js默认接收的数据格式

3、HTML页面：

<table id="idTable" class="table table-striped table-bordered table-hover"  width="100%"></table>

 注意，这里 id="idTable"，全页面不能重复

4、js调取渲染页面代码：

$("#itTable").bootstrapTable({
    //三个必须参数: url、sidePagination、columns
    url: "/article/index",
    sidePagination: "server",
    columns: [
        {field: 'state', checkbox: true, align: 'center'},
        {field: 'id', title: 'ID'},
        {field: 'title', title: '文章标题'},
        {field: 'create_time', title: '创建时间'},
        {
            field: 'status', 
            title: '状态', 
            formatter: function(value, row, index){
                if (value == 'normal'){
                    return '正常';
                }else if(value == 'hidden'){
                    return '隐藏';
                }else if(row.create_time < '2020-01-01'){
                    return '已过期';
                }
            }
        },
        {
            field: 'operate'，
            title: '操作',
            events: 'operateEvents', //操作按钮绑定事件
            formatter: function(value, row, index){
                var html = [
                    '<a href="#" class="btn btn-xs btn-success btn-editone">编辑</a>',
                    '<a href="javascript:;" class="btn btn-xs btn-danger btn-delone" >删除</a>',
            
                ];
                return html.join('');
            }

        }

    ]
    
});



//操作列按钮绑定事件
window.operateEvents = {
    //删除按钮事件
    "click .btn-delone": function(event, value, row, index){
        .....
     },
    //编辑按钮事件
    "click .btn-editone": function(event, value, row, index){
        ......
    }
};

OK，基本数据显示完成

三、 columns列中常用参数：

四、表格的常用参数

整理中。。。。