在 Flex 应用程序中，元数据作为 xml 加载，具有很好的功能，可以深入搜索 xml 节点。在 extjs 版本中，我已将 xml 数据转换为 json，保留深层分层内容，并使用 json 阅读器加载到 extjs Store。我没有创建模型，认为这没有必要，因为模型没有添加任何搜索功能（？）。我正在查看可以使用函数的 store.find、store.findBy、store.findRecord 等，但这些函数看起来非常“单一”。我需要转到“Tabs”“节点”，找到其“名称”为“Tab1”的子“Tab”，并找到其属性“Title”的值......我正在使用描述“节点”但它是分层的 json 数据。我是否缺少可以执行此操作的商店功能，我应该使用商店吗？s 原始 json 数据 - json 是否具有更好的搜索功能，或者我应该通过循环遍历所有“节点”来恢复暴力 javascript？我希望避免循环并找到某种功能。与往常一样，蒂亚
问问题
2932 次
1 回答
4
好吧，我从我们的评论中了解到，您需要一种存储来尽可能快速轻松地访问您的JSON数据。JSON 表示JavaScript Object Notation，所以它是一个对象！
好的，我给你举两个例子。首先，设置 JSON 数据：
{
"users": [{
"user": {
"id": 0 ,
"name": "foo" ,
"age": 22 ,
"skills": [{
"type": "bowcrafting" ,
"skillLevel": 50 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 1 ,
"name": "bar" ,
"age": 71 ,
"skills": [{
"type": "fencing" ,
"skillLevel": 32 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "swordsmanship" ,
"skillLevel": 73 ,
"levels": [10, 25, 50, 75, 80, 85, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 2 ,
"name": "foobar" ,
"age": 132 ,
"skills": [{
"type": "tactics" ,
"skillLevel": 90 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "carpentery" ,
"skillLevel": 86 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
} , {
"type": "hiding" ,
"skillLevel": 100 ,
"levels": [10, 25, 50, 65, 75, 80, 85, 90, 95, 99, 100]
}]
}
}]
}
现在我们有两种方法可以遵循：
第一种方式：我们可以想象将上面的 JSON 保存到一个名为nested-json.json的文件中，然后我们通过一个简单的存储来读取它。然后，我们可以使用findBy搜索来找到我们需要的内容：
var jstore = Ext.create ('Ext.data.Store', {
fields: ['id', 'name', 'age', 'skills'] ,
proxy: {
type: 'ajax' ,
url: 'nested-json.json' ,
reader: {
type: 'json' ,
root: 'users' ,
record: 'user' ,
idProperty: 'id'
}
} ,
autoLoad: true
});
Ext.create ('Ext.button.Button', {
text: 'Push me' ,
renderTo: Ext.getBody () ,
handler: function (btn) {
var index = jstore.findBy (function (user, id) {
// Here's the hint
if (user.data.skills.skillLevel === 50) return id;
else return -1;
});
if (index != -1) {
// It will print 'foo' because it's the user
// that has the skillLevel equal to 50
console.log (jstore.getAt(index).get ('name'));
}
}
});
另一种方式是将上面的 JSON 想象成一个对象，直接从原始 JSON 数据中读取。此时，只需将其用作 javascript 对象即可：
// Users model: required by JSON reader
Ext.define ('Users', {
extend: 'Ext.data.Model' ,
fields: ['id', 'name', 'age', 'skills']
});
// JSON reader
var jreader = Ext.create ('Ext.data.reader.Json', {
model: 'Users' ,
root: 'users' ,
record: 'user' ,
idProperty: 'id'
});
// Reads records directly from raw JSON
var users = jreader.readRecords ({
"users": [{
"user": {
"id": 0 ,
"name": "foo" ,
"age": 22 ,
"skills": [{
"type": "bowcrafting" ,
"skillLevel": 50 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 1 ,
"name": "bar" ,
"age": 71 ,
"skills": [{
"type": "fencing" ,
"skillLevel": 32 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "swordsmanship" ,
"skillLevel": 73 ,
"levels": [10, 25, 50, 75, 80, 85, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 2 ,
"name": "foobar" ,
"age": 132 ,
"skills": [{
"type": "tactics" ,
"skillLevel": 90 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "carpentery" ,
"skillLevel": 86 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
} , {
"type": "hiding" ,
"skillLevel": 100 ,
"levels": [10, 25, 50, 65, 75, 80, 85, 90, 95, 99, 100]
}]
}
}]
});
// Here's the magic
Ext.each (users.records, function (user) {
console.log ('*** USER ***');
console.log (user);
console.log ('id: ' + user.get ('id'));
console.log ('name: ' + user.get ('name'));
console.log ('age: ' + user.get ('age'));
Ext.each (user.get ('skills'), function (skill) {
console.log ('*** SKILL ***');
console.log (skill);
console.log ('type: ' + skill.type);
console.log ('level: ' + skill.skillLevel);
console.log ('*** LEVELS ***');
Ext.each (skill.levels, function (level) {
console.log (level);
});
});
});
这是一个jsfiddle来测试最后一个：jsfiddle
我希望能理解你的要求。如果我没有，请通过您自己制作的示例告诉我；）
于 2012-09-18T18:42:01.327 回答