Question

我正在尝试构建datagrid，启用排序，搜索和分页。因此，我正在使用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

 }]

使用列和数据方法构造datasoruce的数据源类/函数如datasource constructor中所述

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

此外，如何添加一个额外的列，以便我们可以将编辑标记insdie和它应该能够在单击该编辑时编辑特定的行模型。

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

Answer 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 () {

我不知道上面的代码究竟是在做什么依赖它们。

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

1 个答案: