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

天马3798

于 2017-08-04 18:33:19 发布

阅读量2.5k

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap Table使用整理常用操作

本文链接：https://blog.csdn.net/u011127019/article/details/76691479

版权

Bootstrap 专栏收录该内容

14 篇文章 6 订阅

订阅专栏

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

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="修改" οnclick="editBtnClick(' + value + ')"><i class="fa fa-edit"></i></span>';
                                btn += '<span class="btn btn-xs yellow" data-toggle="tooltip" title="充值" οnclick="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使用整理（五）-分页组合查询

Bootstrap Table使用整理（四）-工具栏

Bootstrap Table使用整理（三）