1

次のようにフォーマットされた JSON データ ソースから描画するグリッドを作成しています。

{"recordsReturned":10,
        "totalRecords":471,
        "startIndex":0,
        "sort":"num",
        "dir":"asc",
        "pageSize":100,
        "visitors":[
            {"num":1, "uid": "1", "ipaddress": "24.217.129.98", "hostname": "", "referer": "", "useragent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.14 (KHTML, like Gecko) Version/6.0.1 Safari/536.26.14", "date":1352086661000},
            {"num":2, "uid": "0", "ipaddress": "100.43.83.157", "hostname": "", "referer": "", "useragent": "Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots)", "date":1351761442000},
            {"num":3, "uid": "0", "ipaddress": "100.43.83.157", "hostname": "", "referer": "", "useragent": "Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots)", "date":1351718948000},
            {"num":4, "uid": "0", "ipaddress": "100.43.83.157", "hostname": "", "referer": "", "useragent": "Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots)", "date":1350349829000},
            {"num":5, "uid": "0", "ipaddress": "70.36.100.148", "hostname": "", "referer": "", "useragent": "Mozilla/5.0 (compatible; MJ12bot/v1.4.3; http://www.majestic12.co.uk/bot.php?+)", "date":1349718631000},
            {"num":6, "uid": "0", "ipaddress": "180.76.5.153", "hostname": "", "referer": "", "useragent": "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)", "date":1349396285000},
            {"num":7, "uid": "0", "ipaddress": "76.72.166.150", "hostname": "", "referer": "", "useragent": "Mozilla/5.0 (compatible; MJ12bot/v1.4.3; http://www.majestic12.co.uk/bot.php?+)", "date":1349090589000},
            {"num":8, "uid": "0", "ipaddress": "65.55.52.115", "hostname": "", "referer": "", "useragent": "Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)", "date":1348417348000},
            {"num":9, "uid": "0", "ipaddress": "66.249.72.195", "hostname": "", "referer": "", "useragent": "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)", "date":1348353989000},

等々。YUI 2 DataTable 用にこの JSON 形式を作成しましたが、レコードを理解するために必要なものがすべて含まれているため、うまく機能します。私が YUI で行った dgrid の処理方法がわからないということは、訪問者配列の内容を使用して dgrid を設定するように指示することです。ここに私のdgridコードがあります:

// Create a new constructor by mixing in the components
var CustomGrid = declare([ OnDemandGrid, Keyboard, Selection ]);

var grid = new declare([OnDemandGrid, Keyboard, Selection])({
    store: store,
    columns: {
        num: "ID",
        uid: "visitorsUID"
    },
    /*selectionMode: "single", // for Selection; only select a single row at a time
    cellNavigation: false // for Keyboard; allow only row-level keyboard navigation*/
}, "grid");

grid.setQuery({aid: "1604", sort: "num", dir: "asc", startIndex: "0", results: "100"});

そのサブ行/配列から描画するように dgrid に指示する簡単な方法はありますか?

4

1 に答える 1

2

ここには複数のオプションがありますが、最も簡単なのは、インターフェースを満たす独自の Store を作成するdojo/store/api/Storeか、それをハックしてサブクラス化することdojo/store/JsonStoreです。

var CustomStore = declare(JsonRest, {
    query: function(query, options) {
        var dataProperty = this.dataProperty;
        var results = this.inherited(arguments);
        var deferred = results.then(function(result) {
            return result[dataProperty];
        });
        return QueryResults(deferred);
    }           
});

次に、インスタンス化するときにもう 1 つのプロパティを追加する必要があります - dataProperty:

var store = new CustomStore({
    target: "/visitors/",
    idProperty: "num",
    dataProperty: "visitors"
});

jsFiddle で動作を確認してください: http://jsfiddle.net/phusick/MG9jB/

他のオプションは、に達する前に応答を変更することです。dojo/store/JsonRestそのため、JsonRest期待どおりの配列を取得します。Dojo 1.8 はdojo/request、XHR2 を使用するものを提供するため、残念ながら では動作しませんJsonRestが、エレガントさのために:

// var request = require("dojo/request/registry");
// var xhr = require("dojo/request/xhr");

var handle = request.register(/(.*)\/visitors.json$/, function(url, options) {
    // if any XHR request url ends with `visitors.json` then return
    // `visitors` property
    return xhr.get(url, options).then(function(results) {
        return results["visitors"];
    });
});

request.get("app/visitors.json", {handleAs: "json"}).then(function(visitors) {
    console.log(visitors);
});

記事「dojo/request の紹介」dojox/io/xhrPluginsでは、レガシー コードに対して同様の機能を提供する必要があるリファレンスを見つけることができます。そうでない場合でもdojo/aspect、独自のコンテンツ ハンドラーを使用または作成して、同じことを実現できます。

于 2012-11-06T11:21:05.377 に答える