c# bootstrap-table 知識

bootstrap-table 提供手機端，電腦端訪問，提供分頁，篩選等。

bootstrap-table說明文檔：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

官網：https://github.com/wenzhixin/bootstrap-table

可以使用如下調用：

$(function () {
            var tableInit = new TableInit();
            tableInit.Init();
            $(window).on('resize', tableInit.ChangeCardView);
        });

        var TableInit = function () {
            var oTableInit = new Object();

            oTableInit.Init = function () {
                $('#grid').bootstrapTable({
                    height: oTableInit.GetHeight(), //默認高度未充滿，這里需要計算高度賦予
                    url: '@Url.Action("GetList")',     //請求后台的URL（*）
                    method: 'get',                      //請求方式（*）
                    //toolbar: '#tool',                   //工具按鈕用哪個容器
                    dataType: 'json',
                    striped: true,                      //是否顯示行間隔色
                    cache: false,                       //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
                    pagination: true,                   //是否顯示分頁（*）
                    //sortable: true,                     //是否啟用排序
                    //sortOrder: "asc",                   //排序方式
                    queryParams: oTableInit.QueryParams,           //傳遞參數（*）
                    sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
                    pageList: [10, 25, 50, 100],       //可供選擇的每頁的行數（*）
                    //search: false,                      //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
                    //strictSearch: true,                 //設置為 true啟用 全匹配搜索，否則為模糊搜索
                    showColumns: true,                  //是否顯示所有的列
                    showRefresh: true,                  //是否顯示刷新按鈕
                    minimumCountColumns: 2,             //最少允許的列數
                    clickToSelect: true,                //是否啟用點擊選中行
                    height: 500,                        //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
                    uniqueId: "AdCompanyID",            //每一行的唯一標識，一般為主鍵列
                    //showToggle: true,                   //是否顯示詳細視圖和列表視圖的切換按鈕
                    cardView: true,                     //是否顯示詳細視圖
                    rowStyle: oTableInit.RowStyle,//樣式自定義
                    //detailView: true,                   //是否顯示父子表
                    columns: [
                        { field: 'ID', visible: false },
                        { field: 'Oper', title: '操作', align: 'center', formatter: oTableInit.OperateFormatter }
                    ]
                });
                oTableInit.ChangeCardView();
            };
            //自適應移動端和PC端顯示，是否顯示table還是詳細
            //以500寬度限定，可以自定義
            //默認高度變化后，bootstrapgrid高度不變化，這里重置高度
            oTableInit.ChangeCardView = function (event) {
                var width = $(window).width();
                if (width > 500)
                    $('#grid').bootstrapTable('changeCardView', false);
                else if (width < 500)
                    $('#grid').bootstrapTable('changeCardView', true);
                $('#grid').bootstrapTable('resetView', {
                    height: oTableInit.GetHeight()
                });
            };
            oTableInit.GetHeight = function () {
                return $(window).height() - $('#queryDiv').outerHeight(true);//這里的queryDiv是放置在bootstrapgrid上面的查詢部分
            }
            oTableInit.QueryParams = function (params) {
                var param = {
                    limit: params.limit,
                    offset: params.offset,
                    search: params.search,
                    sort: params.sort,
                    order: params.order,
                    adCompanyName: $('#adCompanyName').val()
                }
                return param;
            };
            oTableInit.RowStyle = function (row, index) {
                var classes = ['success', 'info'];
                if (index % 2 === 0) {//偶數行
                    return { classes: classes[0] };
                } else {//奇數行
                    return { classes: classes[1] };
                }
            };
            oTableInit.OperateFormatter = function (value, row, index) {
                var html = '<a class="btn" href="#"><i class="fa fa-pencil-square"></i> <span>修改</span></a>';
                html += '<a class="btn" href="#"><i class="fa fa-times"></i> <span>刪除</span></a>';
                return html;
            };
            return oTableInit;
        }


//bootstrapTable中需加入changeCardView，如下：
BootstrapTable.prototype.changeCardView = function (cardView) {
        this.options.cardView = cardView;
        this.initHeader();
        // Fixed remove toolbar when click cardView button.
        //that.initToolbar();
        this.initBody();
        this.trigger('toggle', this.options.cardView);
    };