構建與自定義骨幹網收集fuelux數據網格數據源

Question

我想構建數據網格與排序，搜索和分頁啓用。因此，我使用的是fuelux-datagrid。

MY骨幹看法是這樣的：

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

Infact，我剛剛刪除了下面的代碼及其相關的大括號。

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

我不知道上面的代碼是做了什麼依賴他們已經結束。