http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table)
http://www.cnblogs.com/landeanfen/p/5821192.html (bootstrap table editable)
以上两篇是我搜到的相关文章，并且在自己做的东西中也用到了，十分详细，适合刚接触的人阅读学习。
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
同时附录bootstrap-table的中文文档，其实bootstrap-table已经为我们做了很多，我们只需要传入数据，有需要时自己规定输入形式，编辑时的一些方法就差不多了。
下面就是我自己在使用过程中，自己遇到的一些问题，罗列出来，方便以后再次使用的时候，查阅学习。
一. json中的数据并非直接在表格中显示：
比如我json中返回了1/0，而我要显示的为是/否。这里可以用formatter自己定义输入
{
field: 'channel_accounts_type',
title: '操作',
cellStyle:function(){
return { classes: "hideExtraWord" }
},
detailFormatter: function (value, row, index) {
var str = '/crfp2p/dim/toDimMain.html?groupNo='+row.groupNo+'&groupType='+row.groupType
return '<a href="'+str+'" data-type="text">链接</a>';
},
}
二.常见api，在开始推荐的文章链接中也有：
$('#tb_departments').bootstrapTable({
url: url, //请求后台的URL（*）
ajax: ajaxPost,
method: 'post', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: ajaxParams, //传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: , //初始化加载第一页，默认第一页
pageSize: , //每页的记录行数（*）
pageList: [, , , ], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: false,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: , //最少允许的列数
clickToSelect: false,//是否启用点击选中行
//height: 550, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "序号", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
onEditableSave: editSaved,
columns: columns
});
三.查询参数(上面的ajaxParams)：
这里根据后台需要的值传就可以，点击页码的时候，跟向后台请求相应的数据
function queryParams(params) {
//var param_key = $("#formSearch #param_key").val();
//var param_value = $("#formSearch #param_value").val();
//var param_desc = $("#formSearch #param_desc").val();
var postdata = { };
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
rows: params.limit, //页面大小
page: (parseInt(params.offset/params.limit)+), //页码
sidx: "user_Id",
sord: 'desc',
param: postdata
};
return temp;
}
四.删除行的效果：
删除时候的一个效果，可以再成功之后执行回调
// 删除
$("#btn_delete").click(function () {
$($('#tb_departments').bootstrapTable('getSelections')).each(function(){
var passArgument = {
groupId:$(this)[].groupId
}
var argument = {
url: '/dim/xxx.html',
data:passArgument,
success:function(res){
toastr.success('删除成功!');
console.log( $(":checked").parent().parent().fadeOut() )
$(":checked").parent().parent().fadeOut();
}
}
ajax(argument)
})
})
五.对于行内编辑失效：
这里在failed里面加了一个把值改回原来的值，对于后台反馈失败的情况作出处理
function editSaved(field, row, oldValue, $el) {
var passArgument = {
groupDesc:row.groupDesc,
groupId:row.groupId,
groupName:row.groupName,
groupNo:row.groupNo,
groupType:row.groupType
}
var data = {
url: "/dim/findDimGroupByNo.html",
data: passArgument,
success: function (res, status) {
if( res.retcode == ){
toastr.success('修改成功');
var data = {
url:'/dim/saveOrUpdateDimGroup.html',
data:passArgument,
success:function(res){
$('#tb_departments').bootstrapTable('refresh');
}
}
ajax(data)
}else{
toastr.error('修改失败，有冲突');
$el[].innerHTML = oldValue
}
},
error: function(){
toastr.error('修改失败，网络错误');
$el[].innerHTML = oldValue
}
}
ajax(data)
}