Bootstrap Table使用整理（六）-常用操作

一、全局配置部分参数或添加事件处理

1.全局配置加载成功事件

[javascript] view plain copy

 print?

1. //配置bootstrapTable全局参数  
2. console.info(jQuery.fn.bootstrapTable.defaults);  
3. jQuery.fn.bootstrapTable.defaults.onLoadSuccess = function () {  
4.     $('[data-toggle="tooltip"]').tooltip();  
5. }  

二、表格初始化时，注册加载成功等事件，指定ajax请求参数

onLoadSuccess,queryParams如下：

[csharp] view plain copy

 print?

1. table = $('#datatable').bootstrapTable({  
2.                     columns: [  
3.                         { field: 'checkbox', title: '主键', checkbox: true },  
4.                         { field: 'Code', title: '会员编号' },  
5.                         { field: 'RealName', title: '姓名' },  
6.                         { field: 'LevelName', title: '级别' },  
7.                         { field: 'CreateTime', title: '注册时间' },  
8.                         { field: 'RecommendCode', title: '推荐人' },  
9.                         { field: 'UpperCode', title: '安置人' },  
10.                         { field: 'ActiveAmount', title: '激活金额' },  
11.                         { field: 'Coins', title: '电子币' },  
12.                         {  
13.                             field: 'MemberID', title: '操作', formatter(value,rowData,index) {  
14.                                 var btn = '';  
15.                                 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>';  
16.                                 btn += '<span class="btn btn-xs blue" data-toggle="tooltip" title="修改" onclick="editBtnClick(' + value + ')"><i class="fa fa-edit"></i></span>';  
17.                                 btn += '<span class="btn btn-xs yellow" data-toggle="tooltip" title="充值" onclick="chargeBtnClick(' + index + ')"><i class="fa fa-money"></i></span>';  
18.                                 return btn;  
19.                             }  
20.                         }  
21.                     ],  
22.                     url: getAction('getlist_member'),  
23.                     pagination: true,  
24.                     sidePagination: 'server',  
25.                     pageList: [10, 20, 30, 50, 100],  
26.                     queryParams: function (params) {  
27.                         params.IsActive = true;  
28.                         return params;  
29.                     },  
30.                     onLoadSuccess: function () {  
31.                         $('[data-toggle="tooltip"]').tooltip();  
32.                     }  
33.                 });  

三、获取选中结果的ID列表，getSelections方法

[csharp] view plain copy

 print?

1. //1.获取选中ID  
2. var idList = [];  
3. var data = table.bootstrapTable('getSelections');  
4. for (var i = 0; i < data.length; i++) {  
5.     var item = data[i];  
6.     idList.push(item.RemitID);  
7. }  
8. if (idList.length <= 0) {  
9.     showError('请选择要删除项');  
10.     return;  
11. }  
12. //2.提交删除  
13. confirm2('确定要删除吗', function () {  
14.     $.myPost(getAction('delete_remit'), { idList: idList.toString() }, function (data) {  
15.         show(data.msg);  
16.         reload();  
17.     });  
18. });  

四、获取本页的数据列表，获取指定索引的行数据等，getData方法

[javascript] view plain copy

 print?

1. //充值按钮事件  
2. window.chargeBtnClick = function (index) {  
3.     var rowData = table.bootstrapTable('getData')[index];  
4.     $('#chargeModal').modal('show');  
5.     $scope.model = rowData;  
6.     $scope.charge = {  
7.         Type: 1,  
8.         MemberID:rowData.MemberID  
9.     };  
10.     $scope.$apply();  
11. }