构建fuelux数据网格的数据源与自定义的骨干集合 [英] Constructing fuelux datagrid datasource with custom backbone collection

问题描述

我试图建立与排序，搜索和启用分页数据网格。因此，我使用fuelux，数据网格。

I am trying to build datagrid with sorting, searching and paging enabled. Therefore, I am using fuelux-datagrid.

MY骨干看法是这样的：

MY backbone view looks like this:

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数据网格。我的路由code某处实例化集合app.playerview为

The player template just contain the template as given in fuelux datagrid . My routing code somewhere instantiate app.playerview with collection as

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

我的球员集合包含播放器模型的列表如下

My players collection contains list of player model as below

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

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

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

 }]

我的数据源类/函数来构造列和数据的方法datasoruce是在的数据源构造

不过，我得到错误的，在没有定义数据源。有谁能够帮助我？
我只是想破解code，这样，而不是从给出的例子当地data.js构建数据源，我要构建的数据源，使其从playercollection需要的数据。

However, I get the error the " datasource in not defined ". Can anybody help me? I just wanted to hack the code so that instead of datasource constructed from local data.js in given example, I want to construct the datasource so that it takes data from playercollection.

另外，如何添加一个额外的列，这样我们就可以把编辑标签insdie和它应该能够编辑在点击该编辑特定行模式。

Also, how to add the one extra column so that we can put edit tag insdie and its should be able to edit the particular row model on clicking that edit.

我一直stucking围绕这些很多。这将是巨大的帮助找出问题的答案。

I have been stucking around these a lot. It would be great help to figure out the answer.

推荐答案

我是围绕数据源stucking。
我修改了数据源，如下所示，然后它的工作。

I was stucking around datasource. I modified the datasource as follows and then it worked.

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

逸岸，我只是删除以下code及其关联括号。

Infact, I just removed following code and its associated braces.

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

我不知道究竟是什么上面code是做一个什么dependdencies他们对。

I dont know what exactly the above code is doing an what dependdencies they have over.

这篇关于构建fuelux数据网格的数据源与自定义的骨干集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！