bootstrap table使用小记

var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_rolelist').bootstrapTable({
            url: '/Role/GetList',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true,
                visible: true                  //是否显示复选框  
            }, {
                field: 'RoleName',
                title: '角色名称',                
            }, {
                field: 'Remark',
                title: '说明',                             
            },{
                field: 'Id',
                title: '操作',
                width: 120,
                align: 'center',
                valign: 'middle',
                formatter: actionFormatter//自定义列显示
            }],
            onLoadSuccess: function () {
　　　　　　　　//加载成功
            },
            onLoadError: function () {
                //showTips("数据加载失败！");
            },
            onDblClickRow: function (row, $element) {
                var id = row.ID;               
            },        
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageSize: params.limit,   //页面大小
            pageIndex: (params.offset / params.limit) + 1,  //页码           
            remark: $("#txt_search_remark").val(),     //自定义查询条件
            roleName: $("#txt_search_roleName").val()
        };
        return temp;
    };
    return oTableInit;
}

//操作栏的格式化
function actionFormatter(value, row, index) {
    var id = value;
    var result = "";
    result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"DetailViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
    result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
    result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteById('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

    return result;
}

function EditViewById(id) {
    parent.$("#mainFrameTabs").bTabsAdd("Edit" + id, "编辑角色", "/Role/Edit?id=" + id);//操作tab选项卡
}
function DeleteById(id) {
    $.ajax({
        type: "post",
        url: "/Role/Delete",
        data: { "id": id },
        success: function (data, status) {
            $('#tb_rolelist').bootstrapTable('refresh');
        },
        error: function () {
            alert("Failed");
        }

    });
}

还有个 改变行样式的处理函数，根据需求决定受否使用

rowStyle: function (row, index) {
                //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                var strclass = "";
                if (row.RoleName === "待排产") {
                    strclass = 'success';//还有一个active
                }
                else if (row.RoleName === "已删除") {
                    strclass = 'danger';
                }
                else {
                    return {};
                }
                return { classes: strclass }
            },

更多参考https://www.cnblogs.com/wuhuacong/p/7284420.html

http://www.cnblogs.com/wlandwl/p/bootstrap.html

右上角刷新那个工具栏有点与众不同，显示的有问题，多次调试无果，生活还得继续，调试还得进行

 

转载于:https://www.cnblogs.com/0306Leaves/p/8747923.html