zoukankan      html  css  js  c++  java
  • 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:" 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="100%;">
                     <tr>
                       <td>
                         <label>开始时间:</label>
                         <input type="text" data-dojo-type="dijit/form/DateTextBox" data-dojo-id="startDate" data-dojo-props='style:"100px;"'/>
                       </td>
                       <td>
                         <label>结束时间:</label>
                         <input type="text" data-dojo-type="dijit/form/DateTextBox" data-dojo-id="endDate" data-dojo-props='style:"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="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;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":"女"}
    ]}



  • 相关阅读:
    计算机网络
    git学习总结
    MySQL性能优化的21条最佳经验【转】
    为什么Laravel是最成功的PHP框架?
    分布式集群系统下的高可用session解决方案
    浏览器中输入URL到返回页面的全过程
    真正的inotify+rsync实时同步 彻底告别同步慢
    memcache中的add和set方法区别
    php 接口 implements 使用
    Redis的PHP操作手册(自用)
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315526.html
Copyright © 2011-2022 走看看