基于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('加载成功');
            }
        }
    }
}

使用：

    <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>