最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - FuelUX datagrid not loading (using example) - Stack Overflow

programmeradmin0浏览0评论

I'm new to FuelUX so I was trying to get this to work, based on the example provided:

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

    });
});

With this as the data:

(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 */ }]
    }
}));

I've got no console errors, no missing includes. Everthing works just fine - it even looks like it's loading. Except nothing shows up in the datagrid but '0 items'.

Any suggestions? I think I did everything the example provided...

EDIT: 14:33 (Amsterdam) There seems to be a difference when I put this in console:

My page:

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

1st row in console:

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

2nd row in console:

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

FuelUX Example:

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

1st row in console:

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

2nd row in console:

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

Maybe this will help you help me :)

I'm new to FuelUX so I was trying to get this to work, based on the example provided:

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

    });
});

With this as the data:

(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 */ }]
    }
}));

I've got no console errors, no missing includes. Everthing works just fine - it even looks like it's loading. Except nothing shows up in the datagrid but '0 items'.

Any suggestions? I think I did everything the example provided...

EDIT: 14:33 (Amsterdam) There seems to be a difference when I put this in console:

My page:

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

1st row in console:

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

2nd row in console:

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

FuelUX Example:

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

1st row in console:

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

2nd row in console:

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

Maybe this will help you help me :)

Share Improve this question edited May 8, 2013 at 12:52 Bas van Ommen asked May 8, 2013 at 12:07 Bas van OmmenBas van Ommen 1,2932 gold badges12 silver badges20 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 7

I didn't see all of the information I needed to provide a finite answer. The real magic is the datasource.js file (which you had not provided).

I thought an easier way of demonstrating all the necessary pieces would be to put together a JSFiddle showing your data in use and all the pieces that were necessary.

Link to JSFiddle of Fuel UX Datagrid sample with your data

Adam Alexander, the author of the tool, also has written a valuable example of using the 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 });
}
};

If you were to provide your markup and what your "datasource.js" file contains, I may be able to help you further.

I think the demonstration provides much information on any pieces you may not have understood.

Adding on to creatovisguru's answer:

In his JSFiddle example, pagination is broken. To fix it, change the following line:

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

I had the exact same issue, when tried to integrate with Django. The issue I believe is on this line :

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

I was not able to specify file extension, my IDE (pycharm), would mark "red", when used "data.js", so it needs to stay without an extension, such as "sample/data"

What I end up doing to make it work, is downloading the full fuelux directory from github in /var/www/html on a plain Apache setup ( no django, to avoid URL.py issues for static files ) and everything works using their example. Here are the steps to get you started :

cd /var/www/html git clone https://github./ExactTarget/fuelux.git and you will end up with fuelux in /var/www/html/fuelux/

in your browser, navigate to : http://foo./fuelux/index.html ( assuming your default document root is /var/www/html )

good luck!

发布评论

评论列表(0)

  1. 暂无评论