Dgrid and Django Rest Framework (JsonRest)

6.30.15 -我怎样才能把这个问题做得更好，对别人更有帮助?反馈会很有帮助。谢谢!

我正在使用dojo的dgrid创建一个按需网格。我无法连接到商店。我可以得到列标题显示但我不能得到任何数据显示这是我使用的代码。某些数据因保密而更改。非常感谢任何协助。Json是从Django Rest框架api中提取的。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dgrid Test</title>
    <link a ref
</head>
<body>
     <div id="grid"></div>
    <script src="/static/web/dojo/dojo.js"
        data-dojo-config="async: true"></script>

    <script>
        require([
            'dojo/_base/declare',
            'dojo/data/ObjectStore',
            'dojo/store/JsonRest',
            'dojo/store/Memory',
            'dgrid/OnDemandGrid',
            'dojo/domReady!'], function (declare, ObjectStore, Memory, JsonRest, OnDemandGrid) {

    var grid = new OnDemandGrid({
        collection: new dojo.store.JsonRest({target:"/api/storeName/"}),
        columns: {
            id: 'ID',
            column1: 'column1',
            column2: 'column2',
            column3: 'column3',
            column4: 'column4',
            column5:'column5',
            column6:'column6',
            column7:'column7',
            column8: 'column8'
        }
    }, 'grid');
    grid.startup();
});
    </script>

更新-应用了dstore/Rest -仍然不能提取数据。现在列标头不显示…

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dgrid Test</title>
</head>
<body>
     <div id="grid"></div>
    <script src="/static/web_ui/dojo/dojo.js"
        data-dojo-config="async: true"></script>
    <script>
        require([
            'dojo/_base/declare',
            'dojo/dom',
            'dojo/on',
            'dstore/Rest',
            'dgrid/OnDemandGrid',
            'dojo/domReady!' 
], function (declare, dom, on, Rest, OnDemandGrid) {
    // Create an instance of OnDemandGrid referencing the store
    var store = new Rest({ target:"/api/apiname/" });
    });
     var grid = new OnDemandGrid({
        collection: store,
        columns: {
            column1: 'column1',
            column2: 'column2',
            column3: 'column3',
            column4: 'column4',
            column5:'column5',
            column6:'column6',
            column7:'column7',
            column8: 'column8'
        }
    }, 'grid');
    grid.startup();

UPDATE 6.2.15

这是我今天早上一直在修改的代码。以下是Firebug中出现的错误:TypeError: transform(…)为null返回transform(value, key).toString();(第20行)

这真的没有任何意义。我不知道这个错误是否让数据无法显示。不管我怎么做，它都显示不出来。明天要花两周时间做这件事。编程的乐趣。:)

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dgrid Test</title>
</head>
<body>
<h1>Demo: Single-Query Mixin</h1>
    <form id="queryForm">
        <label for="lastField">Blank Blank contains:</label>
        <input id="lastField" name="blank_type">
        <button type="submit">Filter</button>
        <button type="reset">Reset</button>
    </form>
     <div id="grid"></div>
    <script src="/static/web_ui/dojo/dojo.js"
        data-dojo-config="async: true"></script>
    <script>
        require([
            'dojo/_base/declare',
            'dojo/dom',
            'dojo/on',
            'dstore/Rest',
            'dstore/Request',
            //'dstore/RequestMemory',
            'dgrid/extensions/Pagination',
            'dgrid/OnDemandGrid',
            'dstore/Trackable',
            'dojo/domReady!'
], function (declare, dom, on, Rest, Request, Pagination, OnDemandGrid, Trackable) {
    // Create an instance of OnDemandGrid referencing the store
    var data = [];
    for (var i = 0; i < 100; i++) {
        data[i] = {
            id: i + 1,
            name: '' + (i + 1),
            value: i + 1
        };
    }
     var store = new (declare([Rest, Trackable]))({ 
        target:'http://localhost:8000/api/XXXXXXXXX/?format=json',
        range:items=0-25,
        idProperty: 'id',
        data: data
     });

     var grid = new (declare([OnDemandGrid, Pagination]))({
        collection: store,
        columns: [
            {label:"ID", field:"id"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"}
        ]
    }, 'grid');

 grid.startup(); 

});
    </script>
</body>
</html>

这是点击错误链接时的代码。网格本身显示在浏览器中;按钮，列标题…一切……只是没有数据。在终端(服务器信息)中:显示:[02/Jun/2015 13:38:18] "GET/api/XXXXXXXXX/?format=json&limit(25) HTTP/1.1" 200 1631[02/Jun/2015 13:38:18] "GET/api/XXXXXX/?format=json&limit(10) HTTP/1.1" 200 1631

//  |       }
    //  |   );
    thisObject = thisObject || kernel.global;
    transform = transform ?
        lang.hitch(thisObject, transform) : function(v){ return v; };
    return template.replace(/${([^s:}]+)(?::([^s:}]+))?}/g,
        function(match, key, format){
            var value = lang.getObject(key, false, map);
            if(format){
                value = lang.getObject(format, false, thisObject).call(thisObject, value, key);
            }
            return transform(value, key).toString();
        }); // String
};
string.trim = String.prototype.trim ?
    lang.trim : // aliasing to the native function
    function(str){
        str = str.replace(/^s+/, '');
        for(var i = str.length - 1; i >= 0; i--){
            if(/S/.test(str.charAt(i))){
                str = str.substring(0, i + 1);
                break;
            }
        }
        return str;
    };

更新6.3.15下面是尝试创建自定义存储以满足需求的新代码

  <script>
        define([
            'dojo/_base/lang',
            'dojo/_base/declare',
            'dojo/dom',
            'dojo/on',
            'dstore/Store',
            'dojo/Request',
            'dojo/store/Observable',
            'dgrid/extensions/Pagination',
            'dgrid/OnDemandGrid',
            'dstore/QueryResults',
            'dojo/domReady!'
], function (lang, declare, dom, on, Store, Request, Observable, Pagination, OnDemandGrid, QueryResults) {
    // Create an instance of OnDemandGrid referencing the store
     return declare(Observable(Store, { 
        apiUrl:'http://localhost:8000/api/table/?format=json',
        headers: {
            Accept: 'application/json.rest_framework.v3+json'
        },
        'Content-Range':items=0-25/765,
        _request:function (target, options) {
            options = lang.mixin({ handleAs:'json'}, options);
            options.headers = lang.mixin({}, this.headers, options.headers);
            return request(this.apirUrl + target, options);
        },
        get: function (id) {
            return this._request('api/table/'+ encodeURIComponent(id),{
                method: 'GET'
            });
        },
        fetch: function(){
            return new QueryResults(this._request('/api/table'));
        }
     }));

     var grid = new (declare([OnDemandGrid, Pagination]))({
        collection: store,
        columns: {
            {label:"ID", field:"id"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"},
            {label:"XXXXXXXXX", field:"XXXXXXXXX"}
        }
    }, 'grid');

 grid.startup(); 
});
    </script>

这个问题已经开始变形了，所以我把我的答案格式化了一下，尽量匹配，这样它还是有一些凝聚力的。

问题1:使用的dgrid版本与store API

dgrid 0.4与dstore store接口，而不是dojo/store，这就是为什么你最终没有显示数据。

dstore/Rest应该可以作为dojo/store/JsonRest的主要替代品，尽管您可能想要摆弄它从Request继承的一些选项。

如果您以前使用的是dgrid 0.3，那么迁移指南中有一节介绍了存储API的更改。使用网格和存储教程也更新了dgrid 0.4和dstore。

问题2:服务器返回的数据格式

dstore/Rest对它所连接的服务有特定的期望以便工作。关于这一点又出现了一个问题，所以关于细节我有一个答案。

问题3:"transform(…)是null返回transform(value, key).toString();"

这听起来与最初的问题无关，但最常见的原因是小部件模板通过${...}引用了一个属性，而这个属性实际上并不存在于小部件中。

近一个月来，我一直在讨论这个Dojo/Django问题。问题是Django Rest框架API和dojo/dgrid分页之间的兼容性问题。我从Sitepen的Ken Franqueiro和Dylan那里得到了一些很棒的帮助。在和他们反复交谈之后(我敢肯定，这激怒了他们)……:)他们帮我确定了几件事。

Dgrid 0.3最适合Dojo/store - Dgrid 0.4最适合dstore。然而，为了让它在Django Rest框架中正常工作，必须在settings.py中的Django Rest框架设置中设置限制/偏移分页。

# Django REST Framework configuration overrides
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': ('rest_framework.permissions.IsAdminUser',),
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination'
}

Ken还建议我必须创建一个自定义存储来让它完全工作。在实现分页设置后，使用Dojo 1.8和dgrid 0.3.0 (Dojo/store/JsonRest和request)工作得很好。

在这个问题上工作了三个星期(一天)之后，我非常感激地说，数据显示在网格中，我可以继续做下一件事。非常感谢肯和迪伦的帮助(和耐心)!:)

问题1:使用的dgrid版本与store API

问题3:"transform(…)是null返回transform(value, key).toString();"

相关内容

最新更新

热门标签：