2012-11-05 122 views
1

我有我創建抽出被格式化像這樣的JSON數據源的網格:使用Dojo的dgrid,JsonRest和子行/列

{"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,是告訴它使用visitor數組的內容填充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從該子行/陣列畫畫嗎?

回答

2

我可以在這裏看到多個選項,但是最直接的將會編寫自己的商店滿足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); 
    }   
}); 

,那麼你將需要添加更多的財產當實例 - dataProperty

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

在的jsfiddle看到它在行動:http://jsfiddle.net/phusick/MG9jB/

其他選項是在響應達到dojo/store/JsonRest之前更改響應,因此JsonRest可以獲得它所期望的數組。道場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); 
}); 

在文章Introducing dojo/request一個能找到dojox/io/xhrPlugins參考,應提供對遺留代碼類似的功能。即使不這樣做,您也可以使用​​或者編寫自己的content handler來達到同樣的效果。

+0

非常感謝這些信息 - 它確實有幫助! –