JSON网格(JSON Grid)

最新推荐文章于 2022-04-21 14:08:21 发布

dannywj1371

最新推荐文章于 2022-04-21 14:08:21 发布

阅读量2.3k

点赞数

分类专栏： ExtJS 文章标签： json 网格 stylesheet header licensing xml

本文链接：https://blog.csdn.net/dannywj1371/article/details/6267365

版权

ExtJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前一节跟大家介绍了 XML网格(XML Grid) 以xml格式的绑定，在这个AJAX流行年代，xml绑定已经满足不了我们的需求。ExtJs又为我们提供了JSON格式数据绑定的方法，下面我们来看看效果

演示(demo)地址在文章最后.

效果图如下:

用到的有三个文件survey.html、xml-grid.html和xml-grid.js。如果没有特别声明，.html跟.js文件名是一样的。

survey.html

1. [{ "appeId" : "1" , "survId" : "1" , "location" : "" , "surveyDate" : "2008-03-14" , "surveyTime" : "12:19:47" , "inputUserId" : "1" , "inputTime" : "2008-03-14 12:21:51" , "modifyTime" : "0000-00-00 00:00:00" },{ "appeId" : "2" , "survId" : "32" , "location" : "" , "surveyDate" : "2008-03-14" , "surveyTime" : "22:43:09" , "inputUserId" : "32" , "inputTime" : "2008-03-14 22:43:37" , "modifyTime" : "0000-00-00 00:00:00" },{ "appeId" : "3" , "survId" : "32" , "location" : "" , "surveyDate" : "2008-03-15" , "surveyTime" : "07:59:33" , "inputUserId" : "32" , "inputTime" : "2008-03-15 08:00:44" , "modifyTime" : "0000-00-00 00:00:00" },{ "appeId" : "4" , "survId" : "1" , "location" : "" , "surveyDate" : "2008-03-15" , "surveyTime" : "10:45:42" , "inputUserId" : "1" , "inputTime" : "2008-03-15 10:46:04" , "modifyTime" : "0000-00-00 00:00:00" },{ "appeId" : "5" , "survId" : "32" , "location" : "" , "surveyDate" : "2008-03-16" , "surveyTime" : "08:04:49" , "inputUserId" : "32" , "inputTime" : "2008-03-16 08:05:26" , "modifyTime" : "0000-00-00 00:00:00" },{ "appeId" : "6" , "survId" : "32" , "location" : "" , "surveyDate" : "2008-03-20" , "surveyTime" : "20:19:01" , "inputUserId" : "32" , "inputTime" : "2008-03-20 20:19:32" , "modifyTime" : "0000-00-00 00:00:00" }]

json-grid.html

 
   01. 
   <html>   
  
   02. 
   <head>   
  
   03. 
   <meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-1" >   
  
   04. 
   <title>XML Grid Example</title>   
  
   05. 
   <link rel= "stylesheet" type= "text/css" href= "../../resources/css/ext-all.css" />   
  
   06. 
      
   07. 
        <!-- GC -->   
  
   08. 
        <!-- LIBS -->   
  
   09. 
        <script type= "text/javascript" src= "../../adapter/ext/ext-base.js" ></script>   
  
   10. 
        <!-- ENDLIBS -->   
  
   11. 
      
   12. 
        <script type= "text/javascript" src= "../../ext-all.js" ></script>   
  
   13. 
           
   14. 
   <script type= "text/javascript" src= "json-grid.js" ></script>   
  
   15. 
   <link rel= "stylesheet" type= "text/css" href= "grid-examples.css" />   
  
   16. 
      
   17. 
   <!-- Common Styles  for the examples -->   
  
   18. 
   <link rel= "stylesheet" type= "text/css" href= "../examples.css" />   
  
   19. 
   </head>   
  
   20. 
   <body>   
  
   21. 
   <!-- EXAMPLES -->   
  
   22. 
   <script type= "text/javascript" src= "../examples.js" ></script>   
  
   23. 
   <h1>XML Grid Example</h1>   
  
   24. 
   <p>This example shows how to load a grid  with XML data.</p>   
  
   25. 
      
   26. 
   <p>This grid also uses autoHeight and autoWidth to dynamically    
  
   27. 
   size to fit it's data and columns.</p>   
  
   28. 
      
   29. 
   <p>Note that the js is not minified so it is readable.    
  
   30. 
   See <a href= "xml-grid.js" >xml-grid.js</a>.</p>   
  
   31. 
      
   32. 
   <p>The data  in the grid is loaded from <a href= "sheldon.xml" >sheldon.xml</a>   
  
   33. 
   , which is directly from an Amazon.com search.</p>   
  
   34. 
      
   35. 
   <!-- a place holder  for the grid.    
  
   36. 
   requires the unique id to be passed  in the javascript  function ,   
  
   37. 
     and width and height ! -->   
  
   38. 
   <div id= "example-grid" ></div>   
  
   39. 
      
   40. 
   </body>   
  
   41. 
   </html>

json-grid.js

 
   01. 
   /*   
  
   02. 
     * Ext JS Library 2.0.2   
  
   03. 
     * Copyright(c) 2006-2008, Ext JS, LLC.   
  
   04. 
     * <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%22%3e%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><a href="mailto:licensing@extjs.com">licensing@extjs.com</a>   
  
   05. 
     *    
  
   06. 
     */   
  
   07. 
      
   08. 
   Ext.onReady( function (){   
  
   09. 
      
   10. 
        var proxy= new Ext.data.HttpProxy(    {url: 'survey.html' });   
  
   11. 
        //定义reader   
  
   12. 
              var reader= new Ext.data.JsonReader(   
  
   13. 
                {   
  
   14. 
                },[   
  
   15. 
                    {name:  'appeId' , mapping:  'appeId' },   
  
   16. 
                    {name:  'survId' },   
  
   17. 
                    {name:  'location' },    
  
   18. 
                    {name:  'surveyDate' },   
  
   19. 
                    {name:  'surveyTime' },   
  
   20. 
                    {name:  'inputUserId' }              
  
   21. 
                ]   
  
   22. 
            )   
  
   23. 
        //构建Store      
  
   24. 
            var store= new Ext.data.Store(    {   
  
   25. 
              proxy:proxy,   
  
   26. 
              reader:reader   
  
   27. 
           });   
  
   28. 
        //载入   
  
   29. 
        store.load();   
  
   30. 
      
   31. 
      
   32. 
        // create the grid   
  
   33. 
        var grid =  new Ext.grid.GridPanel({   
  
   34. 
            store: store,   
  
   35. 
            columns: [   
  
   36. 
                {header:  "appeId" , width: 60, dataIndex:  'appeId' , sortable:  true },   
  
   37. 
                {header:  "survId" , width: 60, dataIndex:  'survId' , sortable:  true },   
  
   38. 
                {header:  "location" , width: 60, dataIndex:  'location' , sortable:  true },   
  
   39. 
                {header:  "surveyDate" , width: 100, dataIndex:  'surveyDate' , sortable:  true },   
  
   40. 
                {header:  "surveyTime" , width: 100, dataIndex:  'surveyTime' , sortable:  true },   
  
   41. 
                {header:  "inputUserId" , width:80, dataIndex:  'inputUserId' , sortable:  true }   
  
   42. 
            ],   
  
   43. 
            renderTo: 'example-grid' ,   
  
   44. 
            width:540,   
  
   45. 
            height:200   
  
   46. 
        });   
  
   47. 
      
   48. 
   });

演示地址：http://extjs.org.cn/extjs/examples/grid/json-grid.html

dannywj1371

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON网格(JSON Grid)

前一节跟大家介绍了 XML网格(XML Grid)以xml格式的绑定，在这个AJAX流行年代，xml绑定已经满足不了我们的需求。ExtJs又为我们提供了JSON格式数据绑定的方法，下面我们来看看效果演示(demo)地址在文章最后.效果图如下:用到的有三个文件survey.html、xml-grid.html和xml-grid.js。如果没有特别声明，.html跟.js文件名是一样的。survey.htmlview sourceprint?1.[{"appeId":"1","survId":"1","
复制链接

扫一扫

专栏目录