使用自定义主干集合构建fuelux datagrid数据源

Posted 2023-02-22

【中文标题】使用自定义主干集合构建fuelux datagrid数据源

【英文标题】：Constructing fuelux datagrid datasource with custom backbone collection

【发布时间】：2013-03-23 18:27:05

【问题描述】：

我正在尝试构建启用排序、搜索和分页的数据网格。因此，我使用的是fuelux-datagrid。

我的主干视图如下所示：

var app = app || ;
$(function ($) 
'use strict';   

// The Players view
// ---------------
app.PlayersView = Backbone.View.extend(
    template: _.template( $("#player-template").html() ),
        initialize: function () 
        if(this.collection)
            this.collection.fetch();
        
        this.listenTo(this.collection, 'all', this.render);
    ,
    render: function ()            
        this.$el.html( this.template );
        var dataSource = new StaticDataSource(
            columns: [
                
                    property: 'playername',
                    label: 'Name',
                    sortable: true
                ,
                
                    property: 'age',
                    label: 'A',
                    sortable: true
                
            ],
            data: this.collection.toJSON(),
            delay: 250
        );

        $('#MyGrid').datagrid(
            dataSource: dataSource,
            stretchHeight: true
        );
    
);  
);

播放器模板只包含fuelux datagrid 中给出的模板。我的路由代码在某处将 app.playerview 实例化为

 new app.PlayersView(
            collection : new app.PlayersCollection
        ));

我的玩家收藏包含以下玩家型号列表

 [
  "id":1,
  "playername":"rahu",
  "age":13

 ,

  "id":2,
  "playername":"sahul",
  "age":18

,

  "id":3,
  "playername":"ahul",
  "age":19

 ]

我用列和数据方法构造数据源的数据源类/函数在datasource constructor中给出

但是，我收到错误“未定义的数据源”。有谁能够帮我？ 我只是想破解代码，而不是在给定的示例中从本地 data.js 构造数据源，我想构造数据源以便它从 playercollection 获取数据。

另外，如何添加一个额外的列，以便我们可以将编辑标签放入其中，并且它应该能够在单击该编辑时编辑特定的行模型。

我一直在纠结这些。找出答案会很有帮助。

【问题讨论】：

您有没有尝试过***.com/a/15746153/33164 中建议的方法 - 这对您有何影响？

@AdamAlexander，非常感谢您的指导。在您的指导下，我朝着正确的方向前进。我实际上没有正确设置数据源数据。我修改了 datasource.js 然后它工作了。我将发布修改后的代码。

【参考方案1】：

我一直在关注数据源。 我修改了数据源如下，然后它工作了。

var StaticDataSource = function (options) 
    this._formatter = options.formatter;
    this._columns = options.columns;
    this._delay = options.delay || 0;
    this._data = options.data;
;

StaticDataSource.prototype = 

    columns: function () 
        return this._columns;
    ,

    data: function (options, callback) 
        var self = this;

        setTimeout(function () 
            var data = $.extend(true, [], self._data);

            // SEARCHING
            if (options.search) 
                data = _.filter(data, function (item) 
                    var match = false;

                    _.each(item, function (prop) 
                        if (_.isString(prop) || _.isFinite(prop)) 
                            if (prop.toString().toLowerCase().indexOf(options.search.toLowerCase()) !== -1) match = true;
                        
                    );

                    return match;
                );
            

            // FILTERING
            if (options.filter) 
                data = _.filter(data, function (item) 
                    switch(options.filter.value) 
                        case 'lt5m':
                            if(item.population < 5000000) return true;
                            break;
                        case 'gte5m':
                            if(item.population >= 5000000) return true;
                            break;
                        default:
                            return true;
                            break;
                    
                );
            

            var count = data.length;

            // SORTING
            if (options.sortProperty) 
                data = _.sortBy(data, options.sortProperty);
                if (options.sortDirection === 'desc') data.reverse();
            

            // PAGING
            var startIndex = options.pageIndex * options.pageSize;
            var endIndex = startIndex + options.pageSize;
            var end = (endIndex > count) ? count : endIndex;
            var pages = Math.ceil(count / options.pageSize);
            var page = options.pageIndex + 1;
            var start = startIndex + 1;

            data = data.slice(startIndex, endIndex);

            if (self._formatter) self._formatter(data);

            callback( data: data, start: start, end: end, count: count, pages: pages, page: page );

        , this._delay)
    
;

事实上，我刚刚删除了以下代码及其相关的大括号。

(function (root, factory) 
if (typeof define === 'function' && define.amd) 
    define(['underscore'], factory);
 else 
    root.StaticDataSource = factory();

(this, function () 

我不知道上面的代码到底在做什么以及他们有什么依赖关系。