FuelUX數據網格不加載（例如使用）

Question

我是新來FuelUX所以我試圖得到這個工作的基礎上，提供的示例：

require(['jquery','data.js', 'datasource.js', 'fuelux/all'], function ($, sampleData, StaticDataSource) { 

    var dataSource = new StaticDataSource({ 
      columns: [{property:"memberid",label:"LidId",sortable:true},{property:"name",label:"Naam",sortable:true},{property:"age",label:"Leeftijd",sortable:true}], 
      data: sampleData.memberdata, 
      delay: 250 
     }); 

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

    }); 
}); 

以此爲數據：

(function (root, factory) { 
    if (typeof define === 'function' && define.amd) { 
     define(factory); 
    } else { 
     root.sampleData = factory(); 
    } 
}(this, function() { 
    return { 
     "memberdata": [{ 
      "memberid": 103, 
      "name": "Laurens Natzijl", 
      "age": "25" 
     }, { 
      "memberid": 104, 
      "name": "Sandra Snoek", 
      "age": "25" 
     }, { 
      "memberid": 105, 
      "name": "Jacob Kort", 
      "age": "25" 
     }, { 
      "memberid": 106, 
      "name": "Erik Blokker", 
      "age": "25" 
     }, { 
      "memberid": 107, 
      "name": "Jacco Ruigewaard", 
      "age":"25" 
     },{ /* etc */ }] 
    } 
})); 

我沒有控制檯錯誤，沒有失蹤包括。 Everthing工作得很好 - 它甚至看起來像加載。除了'0項目'外，沒有任何內容顯示在數據網格中。

有什麼建議嗎？我覺得我做的一切所提供的例子...

編輯：14點33分（阿姆斯特丹） 似乎有是一個差異，當我把這個控制檯：

我的頁面：

require(['jquery','data.js','datasource.js', 'fuelux/all'], function ($, sampleData, StaticDataSource) { 
    var dataSource = new StaticDataSource({ 
      columns: [{property:"memberid",label:"LidId",sortable:true},{property:"name",label:"Naam",sortable:true},{property:"age",label:"Leeftijd",sortable:true}], 
      data: sampleData.memberdata, 
      delay: 250 
     }); 
    console.debug(dataSource); 
}); 

第一排控制檯：

function localRequire(deps, callback, errback) { /* etc */ } 

第二排控制檯：

StaticDataSource {_formatter: undefined, _columns: Array[3], _delay: 250, _data: Array[25], columns: function…} 

FuelUX例子：

require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], function ($, sampleData, StaticDataSource, DataSourceTree) { 
    var dataSource = new StaticDataSource({ 
     columns: [{property: 'toponymName',label: 'Name',sortable: true}, {property: 'countrycode',label: 'Country',sortable: true}, {property: 'population',label: 'Population',sortable: true}, {property: 'fcodeName',label: 'Type',sortable: true}], 
     data: sampleData.geonames, 
     delay: 250 
    }); 
    console.debug(dataSource); 
}); 

第一排控制檯：

StaticDataSource {_formatter: undefined, _columns: Array[4], _delay: 250, _data: Array[146], columns: function…} 

第二排控制檯：

function (deps, callback, errback, relMap) { /* etc */ } 

也許這將幫助你幫助我： ）

Answer 1

我沒有看到提供有限答案所需的全部信息。真正的魔力是datasource.js文件（你沒有提供）。

我認爲展示所有必要部分的更簡單的方法是將JSFiddle放在一起，顯示正在使用的數據和所有必需的部分。

Link to JSFiddle of Fuel UX Datagrid sample with your data

亞當·亞歷山大，該工具的作者，也有如果你要提供你的標記和你的「datasource.js寫入使用DataGrid DailyJS Fuel UX DataGrid

// DataSource Constructor 
var StaticDataSource = function(options) { 
this._columns = options.columns; 
this._formatter = options.formatter; 
this._data = options.data; 
this._delay = options.delay; 
}; 

StaticDataSource.prototype = { 
columns: function() { 
    return this._columns 
}, 
data: function(options, callback) { 
    var self = this; 

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

    // SEARCHING 
    if (options.search) { 
     data = _.filter(data, function (item) { 
      for (var prop in item) { 
       if (!item.hasOwnProperty(prop)) continue; 
       if (~item[prop].toString().toLowerCase().indexOf(options.search.toLowerCase())) return true; 
      } 
      return false; 
     }); 
    } 

    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: 0, end: 0, count: 0, pages: 0, page: 0 }); 
} 
}; 

的寶貴範例「文件包含，我可能能夠進一步幫助你。

我認爲演示提供了許多您可能尚未理解的部分的信息。

Answer 2

添加到creatovisguru的回答是：

在他的jsfiddle例如，分頁被打破。要修復它，請更改以下行：

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

Answer 3

當試圖與Django集成時，我遇到了完全相同的問題。我相信這個問題是在這條線：

要求（[ 'jQuery的'， 'data.js'， 'datasource.js'， 'fuelux /所有']，函數（$，的sampleData，StaticDataSource中）{

我無法指定文件擴展名，我的IDE（pycharm）會在使用「data.js」時標記爲「紅色」，因此它需要保留不帶擴展名的文件，如「sample/data」

我最終做的工作是從github下載完整的fuelux目錄在/ var/www/html上的一個普通的Apache設置（沒有django，爲了避免靜態文件的URL.py問題），並且所有工作都使用它們示例。以下是開始的步驟：

CD的/ var/www/html等 混帳克隆https://github.com/ExactTarget/fuelux.git ，你將結束與fuelux在/ var/www/html等/ fuelux/

在瀏覽器中

，定位到：http://foo.com/fuelux/index.html（假設你的默認文檔根目錄是/ var/www/html）

祝你好運！