Bootstrap Table使用整理(六)-常用操作
一、全局配置部分参数或添加事件处理
1.全局配置加载成功事件
//配置bootstrapTable全局参数
console.info(jQuery.fn.bootstrapTable.defaults);
jQuery.fn.bootstrapTable.defaults.onLoadSuccess = function () {
$('[data-toggle="tooltip"]').tooltip();
}
二、表格初始化时,注册加载成功等事件,指定ajax请求参数
onLoadSuccess,queryParams如下:
table = $('#datatable').bootstrapTable({
columns: [
{ field: 'checkbox', title: '主键', checkbox: true },
{ field: 'Code', title: '会员编号' },
{ field: 'RealName', title: '姓名' },
{ field: 'LevelName', title: '级别' },
{ field: 'CreateTime', title: '注册时间' },
{ field: 'RecommendCode', title: '推荐人' },
{ field: 'UpperCode', title: '安置人' },
{ field: 'ActiveAmount', title: '激活金额' },
{ field: 'Coins', title: '电子币' },
{
field: 'MemberID', title: '操作', formatter(value,rowData,index) {
var btn = '';
btn += '<a class="btn btn-xs purple" data-toggle="tooltip" title="登陆" href="' + getAction('login?id=' + value) + '" target="_blank"><i class="fa fa-sign-in"></i></a>';
btn += '<span class="btn btn-xs blue" data-toggle="tooltip" title="修改" onclick="editBtnClick(' + value + ')"><i class="fa fa-edit"></i></span>';
btn += '<span class="btn btn-xs yellow" data-toggle="tooltip" title="充值" onclick="chargeBtnClick(' + index + ')"><i class="fa fa-money"></i></span>';
return btn;
}
}
],
url: getAction('getlist_member'),
pagination: true,
sidePagination: 'server',
pageList: [10, 20, 30, 50, 100],
queryParams: function (params) {
params.IsActive = true;
return params;
},
onLoadSuccess: function () {
$('[data-toggle="tooltip"]').tooltip();
}
});
三、获取选中结果的ID列表,getSelections方法
//1.获取选中ID
var idList = [];
var data = table.bootstrapTable('getSelections');
for (var i = 0; i < data.length; i++) {
var item = data[i];
idList.push(item.RemitID);
}
if (idList.length <= 0) {
showError('请选择要删除项');
return;
}
//2.提交删除
confirm2('确定要删除吗', function () {
$.myPost(getAction('delete_remit'), { idList: idList.toString() }, function (data) {
show(data.msg);
reload();
});
});
四、获取本页的数据列表,获取指定索引的行数据等,getData方法
//充值按钮事件
window.chargeBtnClick = function (index) {
var rowData = table.bootstrapTable('getData')[index];
$('#chargeModal').modal('show');
$scope.model = rowData;
$scope.charge = {
Type: 1,
MemberID:rowData.MemberID
};
$scope.$apply();
}
更多参考:
bootstrap-table教程目录
转载自:https://blog.csdn.net/u011127019/article/details/76691479