我正在创建一个网格,用于绘制一个格式如下的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是告诉它使用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从该子行/数组中绘制?
答案 0 :(得分: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
获得预期的响应,即数组。 Dojo 1.8提供了使用XHR2的dojo/request
,因此遗憾的是它不能与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
的引用,该引用应提供与遗留代码类似的功能。即使没有,您也可以使用dojo/aspect
或者编写自己的content handler来实现相同的目标。