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

爱被打了一巴掌 2022-06-09 22:44 235阅读 0赞

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

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"></a>';
 btn += '';
 btn += '';
 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使用整理（五）-分页组合查询][Bootstrap Table_-]

[Bootstrap Table使用整理（四）-工具栏][Bootstrap Table_- 1]

[Bootstrap Table使用整理（三）][Bootstrap Table]

[Bootstrap Table_-]: http://blog.csdn.net/u011127019/article/details/72933921
[Bootstrap Table_- 1]: http://blog.csdn.net/u011127019/article/details/72933897
[Bootstrap Table]: http://blog.csdn.net/u011127019/article/details/72933224