怎样获得JSON语句中的属性值

最新推荐文章于 2024-07-04 16:38:05 发布

Ares

最新推荐文章于 2024-07-04 16:38:05 发布

阅读量214

点赞数

分类专栏： extjs学习文章标签： json EXT CSS IE JavaScript ViewUI

extjs学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

How to read property's value in JSON --怎样获得JSON语句中的属性值

来源：http://extjs.com/forum/showthread.php?t=15875

paging.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<title>Paging Grid Example</title>  
  
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />  
  
    <!-- GC -->  
        <!-- LIBS -->  
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
    <script type="text/javascript" src="../../ext-all-debug.js"></script>  
        <!-- ENDLIBS -->  
  
    <script type="text/javascript" src="../../ext-all.js"></script>  
       
<script type="text/javascript" src="paging.js"></script>  
<link rel="stylesheet" type="text/css" href="grid-examples.css" />  
  
<!-- Common Styles for the examples -->  
<link rel="stylesheet" type="text/css" href="../examples.css" />  
</head>  
<body>  
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->  
<h1>Paging Grid Example</h1>  
<p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain   
    remote data (from the Ext forums).</p>  
<p>Note that the jsis not minified so it is readable. See <a href="paging.js">paging.js</a>.</p>  
<!--    <a href="#" οnclick="Ext.log('Hello from the Ext console.');return false;"><img src="inspector.gif" width="600" height="337" style="margin:15px;"/></a>  
-->  
<div id="topic-grid"></div>  
  
</body>  
</html>

paging.js:

Ext.onReady(function(){   
  
    // create the Data Store   
    var ds = new Ext.data.Store({   
        // load using script tags for cross domain, if the data in on the same domain as   
        // this page, an HttpProxy would be better   
        proxy: new Ext.data.HttpProxy({   
            url: 'a.jsp'//'http://extjs.com/forum/topics-browse-remote.php'   
        }),   
  
        // create reader that reads the Topic records   
        reader: new Ext.data.JsonReader({   
            root: 'topics',   
            totalProperty: 'totalCount',   
            id: 'threadid'   
        }, [   
            'title', 'forumtitle', 'forumid', 'author',   
            {name: 'replycount', type: 'int'},   
            {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},   
            'lastposter', 'excerpt'   
        ]),   
  
        // turn on remote sorting   
        remoteSort: true   
    });   
    ds.setDefaultSort('lastpost', 'desc');   
  
    // pluggable renders   
    function renderTopic(value, p, record){   
        return String.format(   
                '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',   
                value, record.data.forumtitle, record.id, record.data.forumid);   
    }   
    function renderLast(value, p, r){   
        return String.format('{0}   
by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);   
    }   
  
    // the column model has information about grid columns   
    // dataIndex maps the column to the specific data field in   
    // the data store   
    var cm = new Ext.grid.ColumnModel([{   
           id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })   
           header: "Topic",   
           dataIndex: 'title',   
           width: 420,   
           renderer: renderTopic   
        },{   
           header: "Author",   
           dataIndex: 'author',   
           width: 100,   
           hidden: true   
        },{   
           header: "Replies",   
           dataIndex: 'replycount',   
           width: 70,   
           align: 'right'   
        },{   
           id: 'last',   
           header: "Last Post",   
           dataIndex: 'lastpost',   
           width: 150,   
           renderer: renderLast   
        }]);   
  
    // by default columns are sortable   
    cm.defaultSortable = true;   
  
    var grid = new Ext.grid.GridPanel({   
        el:'topic-grid',   
        width:700,   
        height:500,   
        title:'ExtJS.com - Browse Forums',   
        store: ds,   
        cm: cm,   
        trackMouseOver:false,   
        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),   
        loadMask: true,   
        viewConfig: {   
            forceFit:true,   
            enableRowBody:true,   
            showPreview:true,   
            getRowClass : function(record, rowIndex, p, ds){   
                if(this.showPreview){   
                    p.body = '<p>'+record.data.excerpt+'</p>';   
                    return 'x-grid3-row-expanded';   
                }   
                return 'x-grid3-row-collapsed';   
            }   
        },   
        bbar: new Ext.PagingToolbar({   
            pageSize: 25,   
            store: ds,   
            displayInfo: true,   
            displayMsg: 'Displaying topics {0} - {1} of {2}',   
            emptyMsg: "No topics to display",   
            items:[   
                '-', {   
                pressed: true,   
                enableToggle:true,   
                text: 'Show Preview',   
                cls: 'x-btn-text-icon details',   
                toggleHandler: toggleDetails   
            }]   
        })   
    });   
  
    // render it   
    grid.render();   
  
    // trigger the data store load   
    ds.load({params:{start:0, limit:25, forumId: 4}});   
  
    function toggleDetails(btn, pressed){   
        var view = grid.getView();   
        view.showPreview = pressed;   
        view.refresh();   
    }   
});

a.jsp:

<%@page contentType="text/html; charset=UTF-8"%>   
<%@page import="org.json.simple.*"%>   
<%   
  JSONObject obj = new JSONObject();   
  JSONArray array = new JSONArray();   
  JSONObject sub = new JSONObject();   
  sub.put("threadid", new Integer(12313));   
  sub.put("forumid", new Integer(32132));   
  sub.put("forumtitle", "help");   
  sub.put("title", "EditorGrid saving data in FF, but not IE (no errors, hard to debug)");   
  sub.put("author", "stevefink");   
  sub.put("lastposter", "stevefink");   
  sub.put("lastpost", new Integer(1192160261));   
  sub.put("excerpt", "Hi all");   
  sub.put("replycount", new Integer(0));   
  array.add(sub);   
  JSONObject sub2 = new JSONObject();   
  sub2.put("threadid", new Integer(12314));   
  sub2.put("forumid", new Integer(32132));   
  sub2.put("forumtitle", "help");   
  sub2.put("title", "EditorGrid saving data in FF, but not IE (no errors, hard to debug)");   
  sub2.put("author", "stevefink");   
  sub2.put("lastposter", "stevefink");   
  sub2.put("lastpost", new Integer(1192160261));   
  sub2.put("excerpt", "Hi all");   
  sub2.put("replycount", new Integer(0));   
  array.add(sub2);   
  obj.put("topics", array);   
  obj.put("status", new Integer(1));   
  obj.put("totalCount", new Integer(111));   
  out.print(obj);   
%>

a.jsp's return value:

{"totalCount":111,"status":1,"topics":[{"forumid":32132,"title":"EditorGrid saving data in FF, but not IE (no errors, hard to debug)","replycount":0,"lastposter":"stevefink","excerpt":"Hi all","forumtitle":"help","threadid":12313,"lastpost":1192160261,"author":"stevefink"},{"forumid":32132,"title":"EditorGrid saving data in FF, but not IE (no errors, hard to debug)","replycount":0,"lastposter":"stevefink","excerpt":"Hi all","forumtitle":"help","threadid":12314,"lastpost":1192160261,"author":"stevefink"}]}

源码如上：

  原文中要获得JSON语句中的‘status’的属性值。在那篇文章的讨论中，有两种方法可以解决这个问题。在我的上一篇日志（）中提到了一种方法，但是实际在解决中并不能运行，常报错：“是未定义或者空对象”之所以出现这种情况是因为数据还没有加载那（ds的load函数并没有立刻执行，而是在render()函数执行之后，延迟加载），这个问题有两种解法： 

一：另外举个数据。

相应的store编码：

 
         reader 
 : new  
 Ext 
 . 
 data 
 . 
 JsonReader 
 ({

             
 root 
 :  
 'topics' 
 ,

             
 successProperty 
 :  
 'success' 
 ,   
 //add this

             
 totalProperty 
 :  
 'totalCount' 
 ,

             
 id 
 :  
 'threadid'

         
 }, [

             
 'title' 
 ,  
 'forumtitle' 
 ,  
 'forumid' 
 ,  
 'author' 
 ,

            { 
 name 
 :  
 'replycount' 
 ,  
 type 
 :  
 'int' 
 },

            { 
 name 
 :  
 'lastpost' 
 ,  
 mapping 
 :  
 'lastpost' 
 ,  
 type 
 :  
 'date' 
 ,  
 dateFormat 
 :  
 'timestamp' 
 },

             
 'lastposter' 
 ,  
 'excerpt'

         
 ]), 
 

相应的json语句：

 
 {"message":"something wrong","totalCount":11,"success":false} 

对应的访问方法：

 
 ds.load(

    {params:{start:0, limit:25, forumId: 4}},

    {callback:function(store, options, success){

    if(success){

        alert("success");

        //Do something here, like grid.render();  

        return;

    }

    else{

        alert(store.reader.jsonData.message);

    }

  }

});

另外一种解决方法：

 
 ds.on('load', function(store, records, options) {
    if(!store.reader.jsonData.success) {
        ds.removeAll();
        Ext.Msg.alert('Status', store.reader.jsonData.message);
    }
}); 
 

这样子就行了！！！

感谢那个外国帖子！

Ares

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怎样获得JSON语句中的属性值

How to read property's value in JSON --怎样获得JSON语句中的属性值来源：http://extjs.com/forum/showthread.php?t=15875paging.html:&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm...
复制链接

扫一扫

专栏目录