3

我是 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 */ }

也许这会帮助你帮助我:)

4

3 回答 3

7

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

我认为演示所有必要部分的更简单方法是将 JSFiddle 放在一起，显示您正在使用的数据以及所有必要的部分。

使用您的数据链接到 Fuel UX Datagrid 示例的 JSFiddle

该工具的作者 Adam Alexander 还编写了一个使用 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 });
}
};

如果您要提供您的标记以及您的“datasource.js”文件包含的内容，我可能会为您提供进一步的帮助。

我认为该演示提供了有关您可能不理解的任何部分的大量信息。

于 2013-05-08T14:03:56.170 回答
2

添加到 creatovisguru 的答案：

在他的 JSFiddle 示例中，分页被破坏了。要修复它，请更改以下行：

callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });
于 2013-05-22T00:33:36.330 回答
0

在尝试与 Django 集成时，我遇到了完全相同的问题。我相信的问题是在这条线上：

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

我无法指定文件扩展名，我的 IDE（pycharm）在使用“data.js”时会标记为“红色”，因此它需要保持没有扩展名，例如“sample/data”

我最终要做的是让它工作，在一个简单的 Apache 设置（没有 django，以避免静态文件的 URL.py 问题）上从 github 中的 /var/www/html 下载完整的fuelux目录，并且一切都使用他们的例子. 以下是帮助您入门的步骤：

cd /var/www/html git clone https://github.com/ExactTarget/fuelux.git 你最终会在 /var/www/html/fuelux/

在您的浏览器中，导航到：http: //foo.com/fuelux/index.html（假设您的默认文档根目录是 /var/www/html）

祝你好运！

于 2013-12-16T15:51:19.073 回答