dojox.grid.DataGrid dojox.data.HtmlStore

如果您可以一起使用dojox.grid.DataGrid和dojox.data.HtmlStore，那將會非常光滑。也許有一種更簡單的方法可以通過Dojo獲得可排序的表格，但這是我能想到的......並且它不起作用。這是一個DojoCampus的例子，但它也行不通！我錯過了什麼？dojox.grid.DataGrid dojox.data.HtmlStore

<html> 
<head> 
<style type="text/css" media="all"> 
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/resources/dojo.css"; 
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/resources/Grid.css"; 
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/resources/tundraGrid.css"; 
</style> 

<script type="text/javascript"> 
var djConfig = {parseOnLoad: true}; 
</script> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script> 

<script type="text/javascript"> 
    dojo.require("dojox.data.HtmlStore"); 
    dojo.require("dojox.grid.DataGrid"); 
dojo.require('dojo.parser'); 
</script> 

<script type="text/javascript"> 
    var layoutBooks = [[{ 
     field: "isbn", 
     name: "ISBN", 
     width: 10 
    }, 
    { 
     field: "author", 
     name: "Author", 
     width: 10 
    }, 
    { 
     field: "title", 
     name: "Title", 
     width: 'auto' 
    }]]; 
</script> 

</head> 
<body class=tundra> 

<b> 
    Standard HTML table: 
</b> 
<br> 
<table id="myData2"> 
    <thead> 
     <tr> 
      <th> 
       isbn 
      </th> 
      <th> 
       title 
      </th> 
      <th> 
       author 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       A9B57C 
      </td> 
      <td> 
       Title of 1 
      </td> 
      <td> 
       Author of 1 
      </td> 
     </tr> 
     <tr> 
      <td> 
       A9B57F 
      </td> 
      <td> 
       Title of 2 
      </td> 
      <td> 
       Author of 2 
      </td> 
     </tr> 
     <tr> 
      <td> 
       A9B577 
      </td> 
      <td> 
       Title of 3 
      </td> 
      <td> 
       Author of 3 
      </td> 
     </tr> 
     <tr> 
      <td> 
       A9B574 
      </td> 
      <td> 
       Title of 4 
      </td> 
      <td> 
       Author of 4 
      </td> 
     </tr> 
     <tr> 
      <td> 
       A9B5CC 
      </td> 
      <td> 
       Title of 5 
      </td> 
      <td> 
       Author of 5 
      </td> 
     </tr> 
    </tbody> 
</table> 
<br> 
<br> 
<b> 
    dojox.grid.DataGrid connected to the above table: 
</b> 
<br> 
<div dojoType="dojox.data.HtmlStore" dataId="myData2" jsId="gridStore"> 
</div> 
<div style="width: 400px; height: 200px;"> 
    <div id="grid" dojoType="dojox.grid.DataGrid" store="gridStore" structure="layoutBooks" 
    query="{}" rowsPerPage="40"> 
    </div> 
</div>

來源

2009-11-10 Casey Spain