Bootstrap-table-helper

这版只是在原本的基础上进行了一些设置 一些属性更适合 传递参数设置成json 方便传递参数

重点是练习extend的用法 还有查询条件的传递

引用

  <script src="~/lib/bootstrap/dist/bootstrap-table.js"></script>
    <script src="~/lib/bootstrap/dist/locale/bootstrap-table-zh-CN.min.js"></script>

代码

//$table 页面定义的table
//$search 页面查询条件放在一个form里 $search为form节点
//option 初始化json 初始化时设置的一些table属性 方便某些页面需要的table不同
//searchoption 搜索json 添加一些非搜索框里的查询条件
//pagesize 每页数量
//columns 表头
//rowstype 表格每行样式设置回调函数
//successLoadEvent 加载成功回调函数
var TableInit = function ($table, $search, option, searchoption) {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $table.bootstrapTable($.extend(true, {
            url: "",                      //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 10,                     //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 0,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "Id",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            paginationPreText: "上一页",          //页码栏左侧显示信息
            paginationNextText: "下一页",          //页码栏左侧显示信息
            queryParams: oTableInit.queryParams,//得到查询的参数
            //sortable: true,
            columns: [],
            onLoadSuccess: function (data) {
            },
            onLoadError: function () {
            },
            rowStyle: function (row, index) {
                var classesArr = ['active', 'info'];
                var strclass = "";
                if (index % 2 === 0) {//偶数行
                    strclass = classesArr[0];

                } else {//奇数行
                    strclass = classesArr[1];

                }
                return { classes: strclass };

            },//隔行变色
        }, option));

    };
    //搜索按钮 刷新Table，Bootstrap Table 会自动执行重新查询
    oTableInit.Search = function () {
        $table.bootstrapTable('refresh');
    }
    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var json = {};
        if ($search) {
            var form = $search.serializeArray();
            $.each(form, function () {
                if (json[this.name]) {
                    if (!json[this.name].push) {
                        json[this.name] = [json[this.name]];
                    }
                    json[this.name].push();
                } else {
                    json[this.name] = this.value + "";
                }
            });
        }
        json.rows = params.limit;                        //页面大小
        json.page = (params.offset / params.limit) + 1; //页码
        $.extend(true, json, searchoption);
        return json;
    };
    return oTableInit;
};

调用

     var columns = [{
                title: '序号',
                align: "center",
                width: 40,
                formatter: function (value, row, index) {
                    //获取每页显示的数量
                    var pageSize = $('#maptable').bootstrapTable('getOptions').pageSize;
                    //获取当前是第几页
                    var pageNumber = $('#maptable').bootstrapTable('getOptions').pageNumber;
                    //返回序号，注意index是从0开始的，所以要加上1
                    return pageSize * (pageNumber - 1) + index + 1;
                }
            },
            {
                field: 'UserName',
                title: '登录账号',
                align: 'center',
                valign: 'middle',
            },
            {
                field: 'TrueName',
                title: '真实姓名',
                align: 'center',
                valign: 'middle',
            },
            {
                field: 'Call',
                title: '联系方式',
                align: 'center',
                valign: 'middle',
            },
            {
                field: 'Id',
                title: '操作',
                align: 'center',
                valign: 'middle',
                formatter: actionFormatter,    // 自定义方法，添加按钮组
            }];
            function actionFormatter(value, row, index) {
                var result = "";
                      result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditRole('" + value + "')\" title='分配角色'><span class='glyphicon  glyphicon-wrench'></span></a>";
                     result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"Edit('" + value + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                      result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"Delete('" + value + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
                return result;
            }
            var option = {
                url: "/User/GetUserPage",
                uniqueId: "Id",
                pageSize: 10,
                columns: columns
            }
            var oTable = new TableInit($("#maptable"), $(".search-form"), option);
            oTable.Init();
            $("#search_link").click(function () {
                oTable.Search();
            })