bootstrap table 简单使用总结

最近写毕业设计的时候接触了很强大的bootstrap 的table 组件，简直好用！！！！！

效果图：

引用文件：

<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/css/bootstrap-table.css">

<script src="../js/jquery-2.2.3.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../plugins/js/bootstrap-table.js"></script>
<script src="../plugins/js/bootstrap-table-zh-CN.js"></script>

开始使用：

html:

   <table id="tb_departments"></table>

html部分就写一个table标签就够了，剩下的就是强大的js了

js:

var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_departments').bootstrapTable({
            // url: '/Home/GetDepartment',         //请求后台的URL（*）
            // method: 'post',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 5,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            // clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "tnum",                     //每一行的唯一标识，一般为主键列
            columns: [{
                checkbox: true
            }, {
                field: 'tnum',
                title: '工号',
                align: 'center'
            }, {
                field: 'name',
                title: '姓名',
                align: 'center'
            }, {
                field: 'sex',
                title: '性别',
                align: 'center'
            }, {
                field: 'birth',
                title: '出生年月',
                align: 'center'
            },{
                field: 'tel',
                title: '联系电话',
                align: 'center'
            }, {
                field: 'grade',
                title: '学历',
                align: 'center'
            }, {
                field: 'school',
                title: '毕业院校',
                align: 'center',
            }, {
                field: 'college',
                title: '所属院系',
                align: 'center'
            },{
                field: 'office',
                title: '所属教研室',
                align: 'center'
            },{
                field: 'profess',
                title: '职称',
                align: 'center'
            }, {
                field: 'state',
                title: '状态',
                align: 'center'
            },{
                field: 'operation',
                title: '操作',
                align: 'center',
                events:operateEvents,//给按钮注册事件
                formatter:addFunctionAlty//表格中增加按钮
            }]
        });
    };

通常会在表格中添加按钮实现一些功能：

添加按钮：

// 修改按钮、删除按钮
function addFunctionAlty(value, row, index) {
    return [
        '<button type="button" id="btn_edit" class="btn btn-default" data-toggle="modal" data-target="#ModalInfo">修改</button>  ',
        '<button id="btn_delete" class="btn btn-warning">删除</button>'
    ].join('');
}

按钮对应实现的方法：

window.operateEvents = {

    // 点击修改按钮执行的方法
    'click #btn_edit': function (e, value, row, index) {
       // 写自己的方法。。。
    },
    // 点击删除按钮执行的方法
    'click #btn_delete': function (e, value, row, index) {
        // 写自己的方法。。。
    }
};

在表格中插入数据：

  // 插入数据
              $("#tb_departments").bootstrapTable('insertRow', {index:i, row:result.data[i]});

更新某一行的数据：

  $("#tb_departments").bootstrapTable('updateRow', {index: indexT, row: rowT});

bootstrap Table 官方API地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/