BootstrapTable 实现toolbar删除操作

说明：操作前必须导入jquery.js、bootstrap.js和boostrapTable.min.js

1、DIV数据：

<div class="content">
<div class="table-responsive">
<div id="toolbar">
<a href="javascript:void(0);" class="btn btn-primary btn-xs" onclick="resource_addWindow('');"><i class="icon iconfont"></i>新增</a>
<a href="javascript:void(0);" class="btn btn-danger btn-xs" onclick="wf.resource_delete();"><i class="icon iconfont"></i>删除</a>
</div>
<table id="taskList_table" class="table-striped table-hover" data-mobile-responsive="true"></table>
</div>
</div>

1
2
3
4
5
6
7
8
9

2、加载数据：

var $table = $("#taskList_table");
//请求后台的URL（*）
$table.bootstrapTable({
url: "${ctx}/resource/wfResource!findResourceClassType.action?",
method: 'post', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
contentType: "application/x-www-form-urlencoded",
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100, 'All'],
smartDisplay: false,//智能显示分页按钮
paginationPreText: "上一页",
paginationNextText: "下一页",
queryParams: function (params) {
return {
rows: this.pageSize,
page: this.pageNumber,
sort: this.sortName,
order: this.sortOrder
};
},
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
idField : 'oid',
className:'resourceClassType',
sortable: true, //是否启用排序
columns:[[
{field: 'number', title: 'number',visible:false,
formatter: function (value, row, index) {
return index+1;
}},
{field:'id',radio:true},
{field:'name',title:'中文标识',width:150},
{field:'localClazz',title:'类路径',width:200},
{field:'pdKey',title:'pdKey',width:200}
]],
onDblClickRow:function(item, $element){resource_addWindow(item.oid);}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

3、删除按钮事件

wf.resource_delete=function(){
var selectIndex = $('input[name="btSelectItem"]:checked ').val();
deleteItem($table, "${ctx}/resource/wfResource!deleteResourceClassType.action", selectIndex, true);
}

1
2
3
4

4、删除函数封装：

function deleteItem($table, requestUrl, selectIndex, reLoad){
var selRow = $table.bootstrapTable('getSelections');
var idField = $table.bootstrapTable("getOptions").idField;
var className = $table.bootstrapTable("getOptions").className;
if(className!=null && className.length>0){
className +="."
}else{
className = "";
}
var datas = className+idField+"="+eval('selRow[0].'+idField)+"¤ttime="+new Date().getTime();

if(selRow!=null){
qiao.bs.confirm({'title':'提示', 'msg':'此操作不可逆，确认删除第'+selectIndex+'行吗？'}, function(){
$.ajax({
type: "POST",
cache:false,
async : true,
dataType : "json",
url:  requestUrl,
data: datas,
success: function(data){
alert(data.mess);
if ( data.state == 200 ){
$table.bootstrapTable('hideRow', {index:selectIndex});
if(reLoad){
$table.bootstrapTable('refresh');
}
}
}
});
})
}else{
alert('请选取要删除的数据行！');
}
}