extjs关于jsonreader

最新推荐文章于 2025-08-08 12:35:56 发布

iteye_14001

最新推荐文章于 2025-08-08 12:35:56 发布

阅读量88

点赞数

文章标签： json javascript ViewUI

本文探讨了JSON作为数据交换格式的优点，并介绍了如何利用Ext.js的JsonReader组件实现分页数据加载，包括配置参数解释及示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在JavaScript中，JSON是一种非常重要的数据格式，key:value的形式比XML那种复杂的标签结构更容易理解，代码量也更小，很多人倾向于使用它作为EXT的数据交换格式。

JsonReader支持分页，与JSON数据对应格式如下：

 totalProperty:　<wbr><span xml:lang="EN-US">json</span>数据中，保存总记录数的属性</wbr>
 successProperty: <wbr><span xml:lang="EN-US">json</span>数据中，保存是否返回成功的属性名 
</wbr> root:　　　　　　　json数据中，保存记录集的属性的属性名
 id:　　<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> json</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>数据中，记录中主键所对应的列的属性名

例如：为Json- Reader准备的JSON数据如下面的代码所示:

//JSON数据

var json = { 'results': 2,

'rows': [

{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },

{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }

]

 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> };</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr><wbr></wbr>

在JsonReader中设置为如下代码：

 <wbr><span style="color:green;">//JsonReader</span></wbr>
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><span style="color:blue;">var</span> reader = <span style="color:blue;">new</span> Ext.data.JsonReader(</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> {</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> totalProperty: <span style="color:#a31515;">"results"</span>,<wbr><span style="color:green;">//totalRecords</span></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>属性由json.results得到
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> successProperty: <span style="color:blue;">true</span>,<wbr><wbr><wbr><span style="color:green;">//json</span></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>数据中，保存是否返回成功的属性名
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> root: <span style="color:#a31515;">"rows"</span>,<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><span style="color:green;">//</span></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>构造元数据的数组由json.rows得到
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> id: <span style="color:#a31515;">"id"</span><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><span style="color:green;">//id</span></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>由json.id得到
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }, [</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> { name: <span style="color:#a31515;">'name'</span>, mapping: <span style="color:#a31515;">'name'</span> },</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> { name: <span style="color:#a31515;">'occupation'</span>}<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><span style="color:green;">//</span></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>如果name与mapping同名,可以省略mapping
 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> ]</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> );</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

jsonreader从proxy中读取的数据需要进行解析，这些数据转换成Record数组后才能提供给Ext.data.Store使用。

在JavaScript中，JSON是一种非常重要的数据格式，key:value的形式比XML那种复杂的标签结构更容易理解，代码量也更小，很多人倾向于使用它作为EXT的数据交换格式。为JsonReader准备的JSON数据如下面的代码所示:

var data = {

id:0,

totalProperty:2,

successProperty:true,

root:[

{id:'id1',name:'name1',descn:'descn1'},

{id:'id2',name:'name2',descn:'descn2'}

]

};

与数组相比，JSON的最大优点就是支持分页，我们可以使用totalProperty参数表示数据的总量。successProperty参数是可选的，可以用它判断当前请求是否执行成功，进而判断是否进行数据加载。在不希望JsonReader处理响应数据时，可以把successProperty设置成false。

现在来讨论一下JsonReader，看看它是如何与上面的JSON数据对应的，如下面的代码所示。

var reader = new Ext.data.JsonReader({

successProperty: "successproperty",

totalProperty: "totalProperty",

root: "root",

id: "id"

}, [

{name:'id',mapping:'id'},

{name:'name',mapping:'name'},

{name:'descn',mapping:'descn'}

]);

因为name和mapping部分的内容是相同的，其实这里的mapping可以省略，默认会用name参数从JSON中获得对应的数据。如果不想与JSON里的名字一样，也可以使用mapping修改。不过，mapping在这里还有其他用途，如代码清单10-3所示: