bootstrap-table 排序 th中设置data-sort-name无效果？

Question

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

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

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

这里到

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

就直接返回了。

这样的看来的话就是说server端的分页不支持定义的sortName嘛~？求大神

Answer 1

应该是不行，自己重写了几个方法。
目前已经可以正常使用。
标注的部分为修改的部分

完成代码如下：

!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);

Answer 2

大晚上的 ,挖个坟, 碰巧遇到这个问题,顺着 @十一年 的代码测试,发现不太对劲,如果有隐藏列 会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);
            return;
        }

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

        $.each(this.$header.find('th'), function (i, th) {
            var sort_class = $(th).data('field') === that.options.sortName || $(th).data('sort-name') === that.options.sortName ? that.options.sortOrder : 'both';
            $(th).find('.sortable').removeClass('desc asc').addClass(sort_class);
        });
    };
}(jQuery);

Answer 3

尝试楼上几位兄弟的解决办法，在1.22.1版本不起作用，依据楼上几位兄弟的解决思路，解决了排序问题。但是没搞明白rememberOrder配置项具体的实现原理，我用不到，舍弃掉了，希望有人可以解决。

!function($$p) {
    'use strict';

    var BootstrapTable = $.fn.bootstrapTable.Constructor;
    BootstrapTable.prototype.onSort = function (_ref) {
        var type = _ref.type,
          currentTarget = _ref.currentTarget;
        var $this = type === 'keypress' ? $$p(currentTarget) : $$p(currentTarget).parent();
        var $this_ = this.$header.find('th').eq($this.index()); 
        this.$header.add(this.$header_).find('span.order').remove();
        if (this.options.sortName === $this.data('field')) {
          var currentSortOrder = this.options.sortOrder;
          var initialSortOrder = this.columns[this.fieldsColumnsIndex[$this.data('field')]].sortOrder || this.columns[this.fieldsColumnsIndex[$this.data('field')]].order;
          if (currentSortOrder === undefined) {
            this.options.sortOrder = 'asc';
          } else if (currentSortOrder === 'asc') {
            this.options.sortOrder = this.options.sortReset ? initialSortOrder === 'asc' ? 'desc' : undefined : 'desc';
          } else if (this.options.sortOrder === 'desc') {
            this.options.sortOrder = this.options.sortReset ? initialSortOrder === 'desc' ? 'asc' : undefined : 'asc';
          }
          if (this.options.sortOrder === undefined) {
            this.options.sortName = undefined;
          }        
        } else {
          this.options.sortName = $this.data('sortName')||$this.data('field');//修改后          
        //   if (this.options.rememberOrder) {//舍弃了rememberOrder配置项的作用
            this.options.sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc';
        //   } else {
        //     this.options.sortOrder = this.columns[this.fieldsColumnsIndex[$this.data('field')]].sortOrder || this.columns[this.fieldsColumnsIndex[$this.data('field')]].order;
        //   }          
        }       
        // Assign the correct sortable arrow
        this.getCaret();
        this._sort();        
        $this.add($this_).data('order', this.options.sortOrder);
    };
    BootstrapTable.prototype.getCaret = function () {
        var that = this;

        this.$header.find('th').each(function (i, th) {
            var sort_class = $$p(th).data('field') === that.options.sortName || $$p(th).data('sort-name') === that.options.sortName ? that.options.sortOrder : 'both';
            $$p(th).find('.sortable').removeClass('desc asc').addClass(sort_class);
        });
    };
}(jQuery);

Answer 4

赞！ 解决了。多谢楼上