我在这里展示的Dojo简单表格是通过jason的格式与服务器端进行交互的,先看一下Demo,click me
源码如下,源码后付解释:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <%
- response.setHeader("Pragma","No-cache");//HTTP 1.1
- response.setHeader("Cache-Control","no-cache");//HTTP 1.0
- response.setHeader("Expires","0");//防止被proxy
- %>
- <head>
- <title>dojox.Grid with Dojo.Data via binding</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
- <style type="text/css">
- @import "http://www.webkaifa.com/wkfdata/dojo11/dojo/resources/dojo.css";
- @import "http://www.webkaifa.com/wkfdata/dojo11/dojox/grid/_grid/tundraGrid.css";
- #grid{
- width:512px;
- height: 25em;
- padding:1px;
- }
- </style>
- <script type="text/javascript" src="http://www.webkaifa.com/wkfdata/dojo11/dojo/dojo.js"
- djConfig="isDebug:false, debugAtAllCosts: false, parseOnLoad: true"></script>
- <script type="text/javascript">
- dojo.require("dojox.grid.Grid");
- dojo.require("dojo.data.ItemFileReadStore");
- dojo.require("dojo.parser");
- dojo.require("dojox.data.QueryReadStore");
- </script>
- <script type="text/javascript">
- function getRow(inRowIndex){
- return ' ' + inRowIndex;
- }
- var layoutCountries = [
- {type: 'dojox.GridRowView', width:'20px'},
- {
- rows: [[
- { name: "Row", get: getRow, width:'150px'},
- { name: 'type',field: "type", width:'150px'},
- { name: 'name',field: "name", width:'150px'}
- ]]
- }];
- </script>
- </head>
- <body class="tundra">
- <span dojoType="dojo.data.ItemFileReadStore"
- jsId="jsonStore" url="http://www.webkaifa.com/wkfdata/dojo11/dijit/tests/_data/countries.json">
- </span>
- <span dojoType="dojox.grid.data.DojoData"
- jsId="dataModel"
- rowsPerPage="2"
- store="jsonStore"
- query="{ name : '*' }">
- </span>
- <div id="grid" dojoType="dojox.Grid" elasticView="2" model="dataModel" structure="layoutCountries" >
- </div>
- <input name="nextPage" type="button" value="nextPage" onClick="changeJsonStore()">
- </body>
- </html>
- <script>
- function changeJsonStore()
- {
- var newnewJsStore = new dojox.data.QueryReadStore({
- url:"http://www.webkaifa.com/wkfdata/dojo11/dijit/tests/_data/countries.json",
- requestMethod:"post"
- });
- var newnewModel = new dojox.grid.data.DojoData(null, null, {
- store:newJsStore,
- rowsPerPage:30,
- query:"{ name : '*' }"
- });
- var grid=dijit.byId("grid");
- grid.setModel(newModel);
- grid.setStructure(layoutCountries);
- }
- </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的简单表格如果我想对表头进行合并的处理,就像下面的表,第一行是合并的第二行是分开的我应该怎么处理表头呢,我试了没找到办法,请指点一下谢谢了!