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/