bootstrap----bootstrapTable的基本使用方法
孙辰阳
最近使用了bootstrap-table这样的一个控件，来进行操作表格，之后在官网上面都是英文的api，之后有的博客是中文的，为了方便寻找，我就自己copy了一份，给自己备分一下，bootstrap-table 中文 api。之后我又封装了bootstrap的一个控件，最近比较热衷于封装这些东西，文件上传的封装了一个webuploader的控件，都是根据控件的api，之后整理出来的，至少看着叫清晰的效果。
这个就是封装的bootstrap-table的一个控件，包含了基本的一些操作，当然，api里面方法，属性，事件，太多了，所以也不是特别全，但是基本的都有，要是有小伙伴需要什么功能，可以自己添加上去。
;(function (window, $) {
'use strict';
//创建类
function CreateBootstrapTable() {
this.opction = null;
}
CreateBootstrapTable.prototype.init = function (opction) {
CreateBootstrapTable.opction = opction;
$('#' + opction["id"]).bootstrapTable({
//声明表格td的class名，代表此列元素的class名将被排序
sortClass:opction["sortClass"]||undefined,
//表格的高度
height:opction["height"]||undefined,
//当不写任何内容默认显示空
undefinedText:opction["undefinedText"]||"",
//默认false，当设为true，则每行表格的背景会显示灰白相间
striped:opction["striped"]||false,
//定义哪一列的值会被排序，写data-field的自定义名，没定义默认都不排列，同下面的sortOrder结合使用，没写的话列默认递增（asc）
sortName:opction["sortName"]||undefined,
//排序方式
sortOrder: opction["sortOrder"] || "asc",
//（别看错了，是sortStable，sortable在下面）默认false，设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变。原文还有一句：（如果你把此属性设为了true）我们将为此行添加’_position’属性
sortStable:opction["sortStable"]||false,
//定义字体库 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用”fa”时需引用 FontAwesome，并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
iconsPrefix:opction["iconsPrefix"]||"glyphicon",
/*
定义的图标大小：
- undefined =>默认表示默认的按钮尺寸（btn）
- xs =>超小按钮的尺寸（btn-xs）
- sm =>小按钮的尺寸（btn-sm）
- lg =>大按钮的尺寸（btn-lg）
*/
iconSize:opction['iconSize']||undefined,
/*
按钮的类，默认为default。
- 可选的有：primary、danger、warning等等
- 写了之后会自动转换为btn-primary（蓝色）、btn-danger（红色）、btn-warning（黄色）等格式，所以前面不要再加”btn-“，默认为btn-default（白色）
*/
buttonsClass:opction['buttonsClass']||"default",
//列
columns: opction["columns"]||[],
//加载数据
data:opction["data"]||[],
//请求方式（*）
method: opction["method"] || 'post',
//请求后台的URL（*）
url: opction["url"],
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
cache: opction["cache"] || false,
//类型
dataType:'json',
//ajax附加项
ajaxOptionsL:opction["ajaxOptions"]||{},
//传递参数（*）
queryParams: opction['queryParams']||{},
//默认”limit”，设置该属性用来发送符合RESTful格式的参数
queryParamsType:opction['queryParamsType']||'limit',
//是否显示分页（*）
pagination: opction["pagination"] || true,
//默认true，分页条无限循环
paginationLoop:opction['paginationLoop']||true,
//前提：pagination设为true，启用了分页功能。- 默认false，设为true显示总记录数
onlyInfoPagination:opction["onlyInfoPagination"]||false,
//分页方式：client客户端分页，server服务端分页（*）
sidePagination: opction["sidePagination"] || "client",
//初始化加载第一页，默认第一页
pageNumber: opction["pageNumber"] || 1,
//每页的记录行数（*）
pageSize: opction["pageSize"] || 10,
//可供选择的每页的行数（*）
pageList: opction["pageList"] || [10, 25, 50, 100],
//radio（单选按钮）或checkbox（复选框）的字段名
selectItemName:opction["selectItemName"]||"checkbox",
//默认为true，会 机智地（<_<） 根据情况显示分页（pagination）或卡片视图（card view）
smartDisplay:opction["smartDisplay"]||true,
//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
search: opction["search"] || false,
toolbarAlign:opction["toolbarAlign"]||'left',
//工具按钮用哪个容器
toolbar: opction["toolbar"],
//是否启用排序
sortable: opction["sortable"] || false,
strictSearch: opction["strictSearch"] || false,
//是否显示所有的列
showColumns: opction["showColumns"] || false,
//是否显示刷新按钮
showRefresh: opction["showRefresh"] || false,
//最少允许的列数
minimumCountColumns: opction["minimumCountColumns"] || 2,
//每一行的唯一标识，一般为主键列
uniqueId: opction["uniqueId"]||undefined,
//是否显示详细视图和列表视图的切换按钮
showToggle: opction["showToggle"] || false,
//是否显示详细视图
cardView: opction["cardView"] || false,
//是否显示父子表
detailView: opction["detailView"] || false,
//在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）
responseHandler:opction["responseHandler"]||function(res){
return res;
},
//单击行
onClickRow:opction["onClickRow"]||function(row, $element, field){
},
onDblClickRow:opction["onDblClickRow"]||function(row, $element, field){
},
//单击单元格
onClickCell: opction["onClickCell"]||function(field, value, row, $element) {
},
//单击单元格
onDblClickCell: opction["onDblClickCell"]||function(field, value, row, $element) {
},
//单击单元格
onUncheck: opction["onUncheck"]||function(row, $element) {
},
//单击单元格
onCheck: opction["onCheck"]||function(row, $element) {
},
//单击单元格
onCheckAll: opction["onCheckAll"]||function(row) {
},
//单击单元格
onUncheckAll: opction["onUncheckAll"]||function(row) {
},
//单击单元格
onLoadSuccess: opction["onLoadSuccess"]||function(data) {
},
});
}
window.CBT = new CreateBootstrapTable();
})(window, $);
这个就是在html里面的一种写法，当然我这个url是空的，需要自己写后台的，要是有后台不清楚的，可以联系我，之后大家一起讨论一下，qq1029273212
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.template_table_header{
font-weight: 900;
font-size: 2rem;
}
.template_table_header_one{
font-weight: 800;
font-size: 1.5rem;
}
.template_table_header_two{
font-weight: 100;
}
</style>
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
<script src="plugins/jquery/jquery-1.11.3.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="plugins/bootstrap-table/dist/bootstrap-table.css">
<script src="plugins/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="js/bootstrapTableFunction.js"></script>
</head>
<body>
<div class="box">
<div class="box-body">
<div id="toolbar" class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>add
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>delete
</button>
</div>
<table id="table"></table>
</div>
</div>
<script>
CBT.init({
id: "table",
uniqueId: "roomId",
method: "post",
sidePagination: 'server',
toolbar: "#toolbar",
toolbarAlign:'right',
url: '',
pageNumber: 1,
pageSize: 5,
onlyInfoPagination: true,
queryParams: function (params) {
console.log(params);
var res = {
pageNum: (params["offset"] / params["limit"]) + 1,
pageSize: params["limit"]
};
return res;
},
pagination: true,
dataType: 'json',
columns: [
{checkbox: true},
{field: 'roomName', title: 'room name',align:'center', halign: 'center', width: '50%'},
{
field: 'operation',
title: 'operation',
halign: 'center',
width: '50%',
formatter: function (value, row, index) {
console.log(row);
var text = "";
text += "<button type=\"button\" class=\"btn btn-warning \">re-edit</button>";
text += " ";
text += "<button type=\"button\" class=\"btn btn-success \">submit</button>";
return text;
}
}
],
responseHandler: function (res) {
var resNew = {
total: 0,
rows: []
}
if (res.success) {
resNew["total"] = res['data']['total'];
resNew["rows"] = res['data']['list'];
}
return resNew;
}
});
</script>
</body>
</html>
类似资料：