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 = ' 修改';
                html += ' 删除';
                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);
    };

 

转载于:https://www.cnblogs.com/lcawen/p/6640860.html