dojo实现表格

1、源码

BorderContainer.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>BorderContainer</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/tundra/tundra.css"/>
    <script type="text/javascript" src="../dojoroot/dijit/tests/boilerplate.js"></script>    
    
  </head>
  
  <body class="claro" role="main">
     <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='style:"width: 1000px; height: 300px; border: 2px solid blue;"'>
          <div data-dojo-type="dijit/layout/ContentPane" 
               data-dojo-props='region:"top", 
                               style:"background-color: #99DD00; border: 1px black solid; height: 20px;", splitter:true'>
              <table style="width:100%;">
                 <tr>
                   <td>
                     <label>开始时间:</label>
                     <input type="text" data-dojo-type="dijit/form/DateTextBox" data-dojo-id="startDate" data-dojo-props='style:"width:100px;"'/>
                   </td>
                   <td>
                     <label>结束时间:</label>
                     <input type="text" data-dojo-type="dijit/form/DateTextBox" data-dojo-id="endDate" data-dojo-props='style:"width:100px;"'/>
                   </td>
                   <td>
                     <button data-dojo-type="dijit/form/Button" data-dojo-id="searchBtn" data-dojo-props='type:"button", label:"original", "class":"mblRedButton"'>查询</button>
                   </td>
                   <td style="width:40%;"></td>
                 </tr>
              </table>
          </div>
          <div data-dojo-type="dijit/layout/ContentPane" 
               data-dojo-props='region:"center", 
                                style:"background-color: #DDAA00; border: 1px black solid;", splitter:true'>
              <span dojoType="dojo/data/ItemFileWriteStore" 
					data-dojo-id="jsonStore" url="student.json">
			  </span>
			  <table dojoType="dojox/grid/DataGrid" data-dojo-id="grid" id="grid"
					store="jsonStore" query="{ name: '*' }" data-dojo-props='style:"height:300px;width:100%;"'>
					<thead>
						<tr>
							<th field="name" width="500px">姓名</th>
							<th field="age" width="500px">年龄</th>
							<th field="sex" width="500px">性别</th>
						</tr>
					</thead>
				</table>
     	  </div>
     	  <div data-dojo-type="dijit/layout/ContentPane" 
     	       data-dojo-props='region:"bottom", 
     	                        style:"background-color: #00DDDD; border: 1px black solid; height: 50px;", splitter:true'>
              
     	  </div>
     </div>
  </body>
</html>
2、数据源

student.json:

{
	"identifier": "id",
	"label": "name",
	"items": [
	        { "id": "studen0", "name":"张三", "age":"23", "sex":"男"},
	        { "id": "studen1", "name":"李思", "age":"21", "sex":"女"},
	        { "id": "studen2", "name":"魏武", "age":"22", "sex":"男"},
	        { "id": "studen3", "name":"朱珠", "age":"20", "sex":"女"},
	        { "id": "studen4", "name":"赵启", "age":"19", "sex":"男"},
	        { "id": "studen5", "name":"李婷", "age":"22", "sex":"女"},
	        { "id": "studen6", "name":"刘涛", "age":"18", "sex":"男"},
	        { "id": "studen7", "name":"孙婷", "age":"24", "sex":"女"},
	        { "id": "studen8", "name":"郑武", "age":"23", "sex":"男"},
	        { "id": "studen9", "name":"秋香", "age":"20", "sex":"女"}
]}



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值