在服务器上排序Backbone Paginator结果而不是客户端

Posted 2021-05-05

我使用https://github.com/backbone-paginator/backbone.paginator在列可排序的表中显示数据。但是，当单击列的任何标题时，排序在客户端完成，而不是执行新的服务器请求，该请求应包含应该用于对结果进行排序的属性（例如名称）。

基类

module.exports = Backbone.PageableCollection.extend({
    initialize: function (items, options) {
        options || (options = {});
        this.url = options.url || "/";
    },
    state: {
        pageSize: 15,
        firstPage: 0,
        currentPage: 0
    },
    queryParams: {
        sortKey: 'sort',
        pageSize: 'size',
        currentPage: 'page'
    },

parseState: function (resp) {
    return {totalRecords: resp && resp.length > 0 ? resp[0]['total_entries'] : 0};
},
parseRecords: function (resp) {
    return resp && resp.length > 0 ? resp[1] : [];
},

model: Backbone.NestedModel

});

示例实例化

collections.myTasks = new collections.PagingCollection([], {
    model: models.SyncModel.extend({
          url: URLs.TASKS
    }),
    url: URLs.MY_TASKS,
    state: {
         pageSize: 30,
         firstPage: 0,
         currentPage: 0,
    }
});

列

columns: [
    {
        name: "dueDate",
        label: "Due Date",
        cell: "date",
        filterCell: FilterCell,
        editable: false,
        width: "80px"
    },
    {
        name: "reminder",
        label: "Reminder",
        filterCell: FilterCell,
        cell: Backgrid.StringCell.extend({
            formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                fromRaw: function (rawValue, model) {
                    return DateHelper.format(
                        IntervalHelper.calculateBefore(model.attributes['dueDate'], rawValue)
                    );
                }
            })
        }),
        editable: false,
        width: "80px"
    },
    {
        name: "name",
        label: "Subject",
        cell: "string",
        filterCell: FilterCell,
        editable: false,
        width: "auto"
    },
    {
        name: "taskStatusCtlg.taskStatus",
        label: "State",
        filterCell: SelectFilterCell.extend({
            filterField: 'taskStatus',
            addAllOption: true
        }),
        cell: "string",
        width: "75px"
    },
    {
        name: "assignedTo.alfrescoUserName",
        label: "Assigned To",
        cell: "string",
        filterCell: SelectFilterCell.extend({
            filterField: 'assignee',
            addAllOption: true
        }),
        editable: false,
        width: "120px"
    },
    {
        name: "taskTypeCtlg.taskType",
        label: "Type",
        cell: "string",
        filterCell: SelectFilterCell.extend({
            filterField: 'taskType',
            addAllOption: true
        }),
        editable: false,
        width: "70px"
    },
    {
        name: "mainDocument.name",
        label: "Case / Document",
        link: "mainDocument.id",
        cell: LinkCell,
        filterCell: FilterCell,
        editable: false,
        width: '160px'
    }
],

获取数据等没有问题。但是当在客户端上点击插入符号排序时。但是我需要在单击列标题（在服务器上排序）时将“sort”和“order”属性附加到请求URL。

当前要求：

http://localhost/tasks/user?page=0&size=30 

需要的请求：

http://localhost/tasks/user?page=0&size=30&sort=name&order=asc 

答案

Paginator提供3种获取和分类模式：

• client：一切都在客户端。自己提供数据。
• server：从API中获取数据（例如：collection.getFirstPage()）并接收总页数。
• infinite：喜欢server模式，但最好使用未知数量的页面。就像来自外部API的搜索结果一样。

确保您在server上使用mode属性的PageableCollection值。

var books = new Books([
  { name: "A Tale of Two Cities" },
  { name: "Lord of the Rings" },
  // ...
], {
  // Paginate and sort on the server side, this is the default.
  mode: "server",
});

或者在你的集合类定义中：

module.exports = Backbone.PageableCollection.extend({
    mode: "server", // this is the default
    initialize: /*...*/

除此之外，这可能在Backgrid中可解决。

Backgrid的默认设置是在客户端上进行排序。对于自定义行为，您可以

• provide a Backbone.PageableCollection
• 或override the HeaderCell view与您自己的实现

Using a Backbone.PageableCollection

设置collection property of the Grid。

var taskGrid = new Backgrid.Grid({
  collection: collections.myTasks,
  columns: [/*...*/],
});

Overriding the HeaderCell view

您可以在列上使用不同的标题单元格类。标题单元格必须做什么没有限制。事实上，任何Backbone.View类都可以使用。但是，如果要修改分拣机的行为方式，则必须实施排序协议。有关详细信息，请参阅JSDoc。

var SelectAllHeaderCell = Backgrid.HeaderCell.extend({
  // Implement your "select all" logic here
});

var grid = new Backgrid.Grid({

  columns: [{
    name: "selected",
    label: "",
    sortable: false,
    cell: "boolean",
    headerCell: SelectAllHeaderCell
  }],

  collection: col
});

注意（2017/01/30）：文档中API documentation的链接不是最新的，这在issue #664中有讨论。