首页 > 解决方案 > 如何修复引导表中的页脚值?

问题描述

我正在研究带有页脚和排序的引导表。一切正常,但在尝试将排序重置为默认值后,我的页脚总和设置为 0。

我在调用 $table.bootstrapTable('destroy') 后尝试重新加载表格或编辑页脚,但没有任何变化。

默认排序功能:

    setDefaultSorting() {
        let $table = this.getTable();

        //Remove sorting cookies, to delete saved sorting. 'getCookies' method will return current cookies
        $table.bootstrapTable('deleteCookie', 'sortOrder');
        $table.bootstrapTable('deleteCookie', 'sortName');

        //Recreate the table to remove current sorting
        $table.bootstrapTable('destroy');
        this.bootstrap(this.data);
    }

bootstrap ir 调用 $table.bootstrapTable() 的函数:我已删除列以提高可读性


public bootstrap(data) {
        this.data = data;

        let $table = this.getTable();
        let id = this.id;

        $table.bootstrapTable({
            toolbar: '#toolbar',
            sortable: true,
            search: true,
            pagination: true,
            fixedColumns: true,
            pageSize: 10,
            pageList: [5, 10, 15],
            paginationPreText: "‹",
            paginationNextText: "›",
            classes: "table table-hover",
            columns: [
            ],
            data: this.useDefaultSorting(data), //When bootstrapping data on landing page, always use default sorting
            cookie: true,
            cookieIdTable: id
        });

        $table.on('sort.bs.table', (_e: any, _column: string, order: string) => {
            RMLandingPageTable.sortOrder = order;
        });

        $table.on('editable-save.bs.table', function (_e: any, column: any, row: IRMLandingPageGroup, _old: any, _$el) {
            var isRM = column === 'rmFreeText';
            var role = isRM ? ERole.RelationshipManager : ERole.CreditEmployee;
            var text = isRM ? row.rmFreeText : row.creditFreeText;
            RMLandingPageTable.freeTextChange.emit({ globalCustomerId: row.mainGlobalCustomerId, text, role });
        });

        // maxlength is not an option of x-editable, the following is a workaround for setting it to 20
        $table.on('editable-shown.bs.table', function (_e: any, _column: any, _row: any, _old: any, _$el) {
            $('.bootstrap-table-editable-cell input').attr('maxlength', 20);
        });

        this.calculateTotals(data);

        //I'm so sorry, needed for displaying the filter drop down when no results are in the table
        $(".bootstrap-table").css({ "min-height": this.minHeight });
    }

这是计算总数的函数:



private calculateTotals(data) {
        let exposureString: string;   

        var total = Formatter.exposureFormatter(this.sum(data, exposureString)));

        var span = 7;

   this.footer = {
            columns: [
                { title: "", span: span, dataField: "" },
                { title: "Total:", span: 1, dataField: "totalTitle", align: "right" },
                { title: total, span: 1, dataField: "total", align: "left" }
            ]
        };

一切正常,除非我第二次尝试调用默认排序,否则总显示为 0。但是,在调试中我可以看到, this.footer 设置了正确的值。

可能是什么问题?

谢谢!!

标签: typescriptbootstrap-table

解决方案


问题与 BootstrapTable 有关。在初始化时,我正在创建显示零的临时页脚。在创建实际表后,我用真正的页脚覆盖它,该页脚在 Destroy 事件期间被删除。你不能在不破坏自定义页脚的情况下破坏表格。解决方法是在销毁之前复制页脚,并在使用 jquery 重新创建后附加回来。


推荐阅读