基於bootstrap table配置的二次封裝

準備 jQuery js css 引用完畢 開始

若是對bootstrap table 的方法與事件不熟悉： Bootstrap table方法，Bootstrap table事件

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

二次封裝基本的配置：

var Site{
    baseTableConfig: function () {
        var te = {};
        return {
            queryParams: function (params) {
                te.PageSize = params.limit;
                te.Page = (params.offset) / 10 + 1;
                return te;
            },
            method: 'get',                                                      //請求方式
            striped: true,                                                      //斑馬紋
            toolbarAlign: 'left',                                               //工具條位置
            toolbar: '#toolbar',
            queryParamsType: 'limit',
            clickToSelect: true,                                                //點擊行選中
            contentType: "application/x-www-form-urlencoded",
            cache: false,                                                       //緩存
            onlyInfoPagination: false,                                          //
            showRefresh: false,                                                 //是否顯示刷新按鈕
            pagination: true,                                                   //分頁
            minimumCountColumns: 2,
            pageNumber: 1,                                                      //初始化加載第一頁，默認第一頁
            pageSize: 10,                                                        //每頁的記錄行數（*）
            pageList: [10, 25, 50, 100],                                        //可供選擇的每頁的行數（*）
            search: false,
            strictSearch: false,
            smartDisplay: true,
            showToggle: true,                                                   //是否顯示詳細視圖和列表視圖的切換按鈕
            sidePagination: 'server',                                           //分頁 server爲後端分頁 client爲前端分頁
            paginationLoop: false,                                              //循環分頁
            height: 550,
            showColumns: true,                                                   //是否顯示全部的列
            detailView: false,                                                   //是否顯示父子表
            singleSelect: true,                                                  //單選
            sortOrder: "asc",                                                     //排序方式
            onLoadSuccess: function (res) {
                console.log('加載成功');
            }
        }
    }
}

View Code

使用：

    <script>
        var tableInit = function () {
            function queryParams(params) {
                return temp = {
                    PageSize: params.limit,
                    Page: (params.offset) / 10 + 1, 
                    //ORDERNO: $("#ORDERNO").val(),  //這裏寫一些查詢條件 可是PageSize和Page不可少必須寫
                    //StartTime: $("#StartTime").val(),                   
                }
            }           
　　　　　　　　　var tableConfig = $.extend(Site.baseTableConfig(), {
　　　　　　　　　//這裏寫一些配置 其中URL 和 columns是必須的
                url: '@Url.Action("GetTableData", "Order")',
                queryParams: queryParams,             
                columns: [
                 { checkbox: true },               
                 { field: 'Order.SUBMITTIME', title: '下單時間', formatter: Site.changeDateFormat },
                ],
            });
            $('#table').bootstrapTable(tableConfig);
        };
        $(function () {
            tableInit();
        })
    </script>