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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在服务器上排序Backbone Paginator结果而不是客户端相关的知识,希望对你有一定的参考价值。

我使用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的默认设置是在客户端上进行排序。对于自定义行为,您可以

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中有讨论。

以上是关于在服务器上排序Backbone Paginator结果而不是客户端的主要内容,如果未能解决你的问题,请参考以下文章

KNP Paginator 和可使用 ajax 排序

Symfony, Knp Paginator Bundle:使用图标排序

2019.04.06 电商06 分页

Backbone.js 将模型添加到集合问题

是否有任何教“.sync”与服务器的 Backbone.js 教程?

在我自己的服务中使用 knp_paginator