基于bootstrap table配置的二次封装

准备 jQuery js css 引用完毕开始

如果对bootstrap table 的方法与事件不熟悉： Bootstrap table方法，Bootstrap 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>

巴特西

基于bootstrap table配置的二次封装

最新文章

热门文章