bootstraptable展示字段和排序字段不一致的解决办法

问题对人有帮助,内容完整,我也想知道答案 0 问题没有实际价值,缺少关键内容,没有改进余地

展示字段和排序字段不同。

data-field="userCode" data-sortable="true" data-sort-name="user_code">用户编码

function queryParams : function(params) {
    return $.extend({}, params, {
        "page.pageSize" : params.limit,
        "page.offset" : params.offset,
        "page.sort" : **params.sort**,
        "page.order" : params.order,
        "model.search" : params.search
    });
}
queryParams 取到的sort一直是userCode 而不是user_code
对了是server分页 我跟源码看到

这里设置的sort-name
bootstraptable展示字段和排序字段不一致的解决办法_第1张图片

bootstraptable展示字段和排序字段不一致的解决办法_第2张图片
这里到

 if (this.options.sidePagination === 'server') {
        return;
    }

就直接返回了。
bootstraptable展示字段和排序字段不一致的解决办法_第3张图片
这样的看来的话就是说server端的分页不支持定义的sortName嘛~?求大神

  • 2017年03月28日提问
  • 评论
  • 邀请回答
  • 编辑
默认排序 时间排序

3个回答

答案对人有帮助,有参考价值 1 答案没帮助,是错误的答案,答非所问

应该是不行,自己重写了几个方法。
目前已经可以正常使用。
标注的部分为修改的部分
bootstraptable展示字段和排序字段不一致的解决办法_第4张图片

完成代码如下:

!function($) {
    'use strict';

    var BootstrapTable = $.fn.bootstrapTable.Constructor;
    BootstrapTable.prototype.onSort = function (event) {
        var $this = event.type === "keypress" ? $(event.currentTarget) : $(event.currentTarget).parent(),
            $this_ = this.$header.find('th').eq($this.index()),
            sortName = this.header.sortNames[$this.index()];

        this.$header.add(this.$header_).find('span.order').remove();

        if (this.options.sortName === $this.data('field')) {
            this.options.sortOrder = this.options.sortOrder === 'asc' ? 'desc' : 'asc';
        } else {
            this.options.sortName = sortName || $this.data('field');
            this.options.sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc';
        }
        this.trigger('sort', this.options.sortName, this.options.sortOrder);

        $this.add($this_).data('order', this.options.sortOrder);

        // Assign the correct sortable arrow
        this.getCaret();

        if (this.options.sidePagination === 'server') {
            this.initServer(this.options.silentSort);
            return;
        }

        this.initSort();
        this.initBody();
    };
    BootstrapTable.prototype.getCaret = function () {
        var that = this;

        $.each(this.$header.find('th'), function (i, th) {
            var sortName = that.header.sortNames[i];
            $(th).find('.sortable').removeClass('desc asc').addClass((sortName || $(th).data('field')) === that.options.sortName ? that.options.sortOrder : 'both');
        });
    };
}(jQuery);
  • 2017年03月29日更新
  • 1 评论
  • 赞赏
  • 编辑
答案对人有帮助,有参考价值 0 答案没帮助,是错误的答案,答非所问

大晚上的 ,挖个坟, 碰巧遇到这个问题,顺着 @十一年 的代码测试,发现不太对劲,如果有隐藏列 会bug,贴下我改的:


!function($) {
    'use strict';

    var BootstrapTable = $.fn.bootstrapTable.Constructor;
    BootstrapTable.prototype.onSort = function (event) {
        var $this = event.type === "keypress" ? $(event.currentTarget) : $(event.currentTarget).parent(),
            $this_ = this.$header.find('th').eq($this.index());

        this.$header.add(this.$header_).find('span.order').remove();

        if (this.options.sortName === $this.data('field')) {
            this.options.sortOrder = this.options.sortOrder === 'asc' ? 'desc' : 'asc';
        } else {
            this.options.sortName = $this.data('sort-name') ? $this.data('sort-name') : $this.data('field');
            this.options.sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc';
        }
        this.trigger('sort', this.options.sortName, this.options.sortOrder);

        $this.add($this_).data('order', this.options.sortOrder);

        // Assign the correct sortable arrow
        this.getCaret();

        if (this.options.sidePagination === 'server') {
            this.initServer(this.options.silentSort);

你可能感兴趣的:(Web编程)