dojo的grid组件,其功能还是很强大的,我主要用到两种方式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test dojox.grid.DataGrid Basic Editing</title> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"></Meta> <style type="text/css"> @import "../../../dojo/resources/dojo.css"; @import "../resources/Grid.css"; @import "../resources/tundraGrid.css"; body { font-size: 0.9em; font-family: Geneva,Arial,Helvetica,sans-serif; } .heading { font-weight: bold; padding-bottom: 0.25em; } #grid,#grid2 { width: 65em; height: 25em; padding: 1px; } </style> <script> //定义grid的结构 ModelGridLayout = [{ cells: [ { name:'<div style=" float:left;width:20px;height:20px;">second</div>',field: 'name',editable: true,width: '300px',cellStyles: 'text-decoration: none; cursor:default; ',headerStyles: 'text-align: center;' },{ name:'first',field: 'area',width: 'auto',headerStyles: 'text-align: center;'},],}]; </script> <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true,parSEOnLoad: true"> </script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dojo.parser"); </script> <script type="text/javascript" src="support/test_data.js"></script> </head> <body class="tundra"> <div class="heading">dojox.grid.DataGrid Basic Editing Test</div> <span dojoType="dojo.data.ItemFileWriteStore" jsId="jsonStore" url="../../../dijit/tests/_data/countries.json"> </span> <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" store="jsonStore" query="{ name: '*' }" rowsPerPage="20" rowSelector="20px"> <thead> <tr> <th field="name" width="300px">Country/Continent Name</th> <th field="type" width="auto" cellType="dojox.grid.cells.Select" options="country,city,continent" editable="true">Type</th> </tr> </thead> </table> <div dojoType="dojox.grid.DataGrid" jsid="grid1" id="grid1" store="jsonStore" query="{ name: '*' }" style="width:800px" structure=ModelGridLayout rowSelector="20px"></div> </body> </html>