Javascript FuelUX数据网格未加载（使用示例）

我是新加入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项”之外，datagrid中没有显示任何内容

有什么建议吗？我想我做了这个例子提供的所有事情

编辑：14:33（阿姆斯特丹） 当我把它放在控制台中时，似乎有一个区别：

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

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

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

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

我的页面：

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

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

控制台中的第一行：

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

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

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

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

控制台中的第二排：

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

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

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

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

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
        });
    console.debug(dataSource);
});

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

控制台中的第一行：

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

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

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

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

控制台中的第二排：

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

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

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

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

---

也许这会帮助你帮助我：）

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

我认为演示所有必要部分的一种更简单的方法是将一个JSFIDLE放在一起，显示正在使用的数据和所有必要的部分

该工具的作者Adam Alexander还编写了一个使用dataGrid的有价值的示例

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

---

我认为该演示提供了许多您可能不了解的信息。

补充creatovisguru的答案：

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

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

---

当我试图与Django整合时，我遇到了完全相同的问题。我认为问题在于：

require（['jquery'，'data.js'，'datasource.js'，'fuelux/all'，函数（$，sampleData，StaticDataSource）{

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

我最终要做的是，在一个普通的Apache设置（没有django，以避免静态文件的URL.py问题）上从github下载/var/www/html中的完整fuelux目录，并且一切都使用它们的示例工作。以下是开始的步骤：

cd/var/www/html git克隆 您将在/var/www/html/fuelux中找到fuelux/

在浏览器中，导航到：（假设默认文档根为/var/www/html）

---

祝你好运！

谢谢你的回复。我使用了默认设置，去掉了过滤器。你的提琴示例运行良好。但是，我是requirejs。所以它没有修复。但我仍然会使用你的解决方案。Thanx。我会尝试看看我是否更喜欢这个。然后我会决定是否接受它作为答案~好吗？Thanx再次！你可以做的是使用co在上面的答案中使用de替换require dependencies中的“datasource.js”文件。