主题:学习Dojo的简单表格

我在这里展示的Dojo简单表格是通过jason的格式与服务器端进行交互的,先看一下Demo,click me
源码如下,源码后付解释:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <%      
  4.     response.setHeader("Pragma","No-cache");//HTTP 1.1    
  5.     response.setHeader("Cache-Control","no-cache");//HTTP 1.0    
  6.     response.setHeader("Expires","0");//防止被proxy     
  7.   %>     
  8. <head>  
  9.     <title>dojox.Grid with Dojo.Data via binding</title>  
  10.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>  
  11.     <style type="text/css">  
  12.         @import "http://www.webkaifa.com/wkfdata/dojo11/dojo/resources/dojo.css";   
  13.         @import "http://www.webkaifa.com/wkfdata/dojo11/dojox/grid/_grid/tundraGrid.css";   
  14.         #grid{   
  15.             width:512px;   
  16.             height: 25em;    
  17.             padding:1px;   
  18.         }   
  19.     </style>  
  20.     <script type="text/javascript" src="http://www.webkaifa.com/wkfdata/dojo11/dojo/dojo.js"    
  21.         djConfig="isDebug:false, debugAtAllCosts: false, parseOnLoad: true"></script>  
  22.     <script type="text/javascript">  
  23.         dojo.require("dojox.grid.Grid");   
  24.         dojo.require("dojo.data.ItemFileReadStore");   
  25.         dojo.require("dojo.parser");     
  26.         dojo.require("dojox.data.QueryReadStore");   
  27.     </script>  
  28.     <script type="text/javascript">  
  29.         function getRow(inRowIndex){   
  30.             return ' ' + inRowIndex;   
  31.         }   
  32.         var layoutCountries = [   
  33.         {type: 'dojox.GridRowView', width:'20px'},   
  34.         {   
  35.             rows: [[   
  36.               { name: "Row", get: getRow, width:'150px'},   
  37.                 { name: 'type',field: "type", width:'150px'},   
  38.                 { name: 'name',field: "name", width:'150px'}   
  39.             ]]   
  40.         }];   
  41.     </script>  
  42. </head>  
  43. <body class="tundra">  
  44.     <span dojoType="dojo.data.ItemFileReadStore"    
  45.         jsId="jsonStore" url="http://www.webkaifa.com/wkfdata/dojo11/dijit/tests/_data/countries.json">  
  46.     </span>  
  47.     <span dojoType="dojox.grid.data.DojoData"    
  48.         jsId="dataModel"    
  49.         rowsPerPage="2"  
  50.         store="jsonStore"    
  51.         query="{ name : '*' }">  
  52.     </span>  
  53.     <div id="grid" dojoType="dojox.Grid" elasticView="2" model="dataModel" structure="layoutCountries" >  
  54.     </div>  
  55.     <input name="nextPage" type="button" value="nextPage" onClick="changeJsonStore()">  
  56. </body>  
  57. </html>  
  58. <script>  
  59. function changeJsonStore()   
  60. {   
  61.     var newnewJsStore = new dojox.data.QueryReadStore({   
  62.                 url:"http://www.webkaifa.com/wkfdata/dojo11/dijit/tests/_data/countries.json",   
  63.                 requestMethod:"post"   
  64.             });   
  65.     var newnewModel = new dojox.grid.data.DojoData(null, null, {   
  66.                 store:newJsStore,   
  67.                 rowsPerPage:30,   
  68.                 query:"{ name : '*' }"   
  69.             });   
  70.     var grid=dijit.byId("grid");   
  71.     grid.setModel(newModel);   
  72.     grid.setStructure(layoutCountries);   
  73. }   
  74. </script>  

 

大体的解释一下主要源代码。
10~19:加载gird的css定义
20~27:记载页面用到的dojo库代码
29~31:生成记录的索引
32~40:定义grid的行显示规则
44~46:定义grid的数据加载源的地址
47~52:定义grid的显示模式
53~54:定义grid的显示位置
59~73:定义翻页动作需要调用的js代码,所以说在实际web开发过程中需要自己定义导航调。




主题:Re:学习Dojo的简单表格

如果我想对表头进行合并的处理,就像下面的表,第一行是合并的第二行是分开的我应该怎么处理表头呢,我试了没找到办法,请指点一下谢谢了!

  饭钱  
 早  中  晚




 
用photoshop 裁图适当大小的图
Dojo 用Dojo的javascript库去建立Ajax应用-dojo指南->9(其它特殊微巨)
Dojo 用Dojo的javascript库去建立Ajax应用-dojo指南->8(Dojo排版微巨)
Dojo 用Dojo的javascript库去建立Ajax应用-dojo指南->7(Dojo表单微巨)
Re:photoshop 用钢笔扣图
Re:Dojo 用Dojo的javascript库去建立Ajax应用-dojo指南->6(Dojo的微巨)
Dojo 用Dojo的javascript库去建立Ajax应用-dojo指南->5(用Dojo处理表单)
Dojo 用Dojo的javascript库去建立Ajax应用-dojo指南->4(用Dojo的小控件)
Dojo 用Dojo的javascript库去建立Ajax应用-dojo指南->3(用Dojo实现与服务端的交互)
Dojo 用Dojo的javascript库去建立Ajax应用-dojo指南->2(用Dojo解决客户端的数据有效性检验)
Dojo的体系架构-这个图很重要
高价收购友情链接
web开发QQ群:43863047
sdaa
Re:photoshop修改图片字,修改button字
ps通过裁剪得到新图片的方法
javascript中的小技巧
自己写Html编辑器-创建一个可输入的区域
unix命令查看目录空间
tcp三次握手及原理