bootstrap-table表格插件的使用案例

近期剛剛結束一個項目，總結一下之前做的一個后台管理系統中用到的bootstrap-table表格插件，下面是我做的一個案例（展示主要代碼部分）：

//請求服務數據時所傳參數
        function queryParams(params){
            return{
                //每頁多少條數據
                pageSize: params.limit,
                //請求第幾頁
                pageIndex: params.pageNumber,
            }
        }
//創建表格
        $('#table').bootstrapTable({
            method: 'get',
            url: "../controller/main_pic_list.php",//后台接口地址
            dataType: "json",
            pagination: true, //分頁
            search: true, //顯示搜索框，是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端
            strictSearch: true,//Enable the strict search
            striped: true, //是否顯示行間隔色
            pageNumber: 1, //初始化加載第一頁，默認第一頁
            pageSize: 5,//每頁的記錄行數
            pageList:[5,10,15,20,25,30],//分頁步進值
            showRefresh:true,//刷新按鈕
            showColumns:true,//是否顯示所有的列

            //sortable: true,//是否啟用排序
            //sortOrder: "asc",//排序方式
            //uniqueId: "ID",//每一行的唯一標識，一般為主鍵列
            showToggle:true,//是否顯示詳細視圖和列表視圖的切換按鈕
            //cardView: false,//是否顯示詳細視圖
            //detailView: false,//是否顯示父子表
            //toolbar: '#toolbar',//指定工具欄
            //clickToSelect: true,//是否啟用點擊選中行
            //toolbarAlign:'right',//工具欄對齊方式
            //buttonsAlign:'right',//按鈕對齊方式

            queryParamsType:'limit',//查詢參數組織方式
            queryParams:queryParams,//請求服務器時所傳的參數

            cache: false,//是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
            locale:'zh-CN',//中文支持
            sidePagination: "server", //服務端處理分頁
            responseHandler:function(res){
                //在ajax獲取到數據，渲染表格之前，修改數據源
                $.each(res.rows,function (i,v) {
                    v.updatetime = getLocalTime(v.updatetime);
                });
                return res;
            },
            columns: [
                {
                    title:'全選',
                    field:'select',
                    //復選框
                    checkbox:true,
                    width:25,
                    align:'center',
                    valign:'middle'
                },
                {
                    title: 'id',
                    field: 'id',
                    align: 'center'
                },
                {
                    title: '標題',
                    field: 'title',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '說明信息',
                    field: 'altinfo',
                    align: 'center',
                },
                {
                    title: '所屬模塊',
                    field: 'modname',
                    align: 'center'
                },
                {
                    title: '圖片URL',
                    field: 'pictureurl',
                    align: 'center',
　　　　　　　　　　　　//更改此項顯示的內容，無此參數會顯示默認值
                    formatter:function(value,row,index){
                        return '<a href="'+ value +'" target=_blank>'+value+'</a> ';
                    }
                },
                {
                    title: '狀態',
                    field: 'status',
                    align: 'center'
                },
                {
                    title: '權重',
                    field: 'weight',
                    align: 'center'
                },
                {
                    title: '最近更新時間',
                    field: 'updatetime',
                    align: 'center'
                },
                {
                    title: '創建者',
                    field: 'createuser',
                    align: 'center'
                },
                {
                    title: '最新修改者',
                    field: 'lastuser',
                    align: 'center'
                },
                {
                    title: '最近修改者ip',
                    field: 'lastip',
                    align: 'center'
                },
                {
                    title: '操作',
                    field: 'operation',
                    align: 'center',
　　　　　　　　　　　　//更改此項顯示的內容，無此參數會顯示默認值
                    formatter:function(value,row,index){
                        var e = '<a href="main_pic_edit.html?id='+ row.id +'">編輯</a> ';
                        var d = '<a href="../controller/main_pic_delete.php?id='+ row.id +'"style="color:red" href="#">刪除</a> ';
                        if(value === 'e') {
                            return e;
                        }
                        if(value === 'ed') {
                            return e+d;
                        }
                    }
                }
            ]
        });

　　注意：1. bootstrap-table表格插件自帶分頁功能，傳遞的參數要和后台協商定義好；2. 其他參數配置參考代碼中的注釋。