FuelUX数据网格未加载(使用示例)
FuelUX datagrid not loading (using example)
我是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 */ }]
}
}));
我没有控制台错误,没有丢失的包括。一切都很好-它甚至看起来像正在加载。除了"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 */ }
也许这将有助于你帮助我:)
我没有看到提供有限答案所需的所有信息。真正神奇的是datasource.js文件(您还没有提供)。
我认为演示所有必要部分的一种更简单的方法是将一个JSFiddle放在一起,显示正在使用的数据和所有必要的部分。
链接到Fuel UX Datagrid示例的JSFiddle与您的数据
Adam Alexander,该工具的作者,也写了一个使用dataGrid的有价值的例子DailyJS燃料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 });
}
};
如果你要提供你的标记和你的"datasource.js"文件包含的内容,我可能能够进一步帮助你。
补充creatovisguru的回答:
在他的JSFiddle示例中,分页被破坏。要修复它,请更改以下行:
callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });
我在尝试与Django集成时遇到了完全相同的问题。我认为问题就在这一行:
require(['jquery','data.js','datasource.js', 'fuelux/all'], function ($, sampleData, StaticDataSource) {
我无法指定文件扩展名,我的IDE (pycharm)在使用"data.js"时将标记为"红色",因此它需要保持没有扩展名,例如"sample/data"
我最终做的是让它工作,是下载完整的fuelux目录从github在/var/www/html上的一个普通的Apache设置(没有django,以避免静态文件的URL.py问题)和一切工作使用他们的例子。下面是让你开始的步骤:
cd/var/www/htmlgit clone https://github.com/ExactTarget/fuelux.git最后你会得到fuelux在/var/www/html/fuelux/
在您的浏览器中,导航到:http://foo.com/fuelux/index.html(假设您的默认文档根是/var/www/html)
祝你好运!
- 正在等待呈现图表,直到加载数据为止
- ng绑定和ng href问题.ng href未从控制器加载数据
- 单击按钮时加载数据
- 在reactjs组件中预加载数据
- Highcharts可以从服务器加载数据,但不能更新
- AngularJS promise在加载数据之前得到解决
- 在Knockout JS中搜索从DB加载数据的项目
- 如何在angular js中使用$emit后重新加载数据
- 构建多个图表时,HighCharts加载数据的速度较慢
- 加载初始网站后在后台加载数据
- ExtJS网格未从Ext.data.XmlStore加载数据
- 数据表 AJAX 筛选器重新加载数据
- select2 使用 AJAX 加载数据不能选择任何选项
- 在 Metro 风格应用中启动时加载数据
- 需要帮助使用 AJAX 和其他一些东西加载数据
- Vue 不加载数据
- 向右滚动加载数据
- 为SEO的数据绑定JS预加载数据
- mysql循环-预加载数据
- 无法使用JSON加载数据表