要 COOL就酷到底- -dojo data grid 1 -基本输出
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="grid.css/grid.css">
<script type="text/javascript" src="../../dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.data.CsvStore");
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (window.pub) {
window.pub();
}
});
</script>
</head>
<body class="tundra ">
基本的Grid-分成两个子行的网络
这点比较适合做类似订单的输出，订单信息和订购条目，1对多的输出,虽然不支持一个以上数据源，但对于表的映射是1 对 多，不需要去搞多个数据源
注意：必须指定数据储存器的标识符，,query 和queryOptions初始化注入的属性,默认的为name 这里指定查询Title rowSelector="30px"左侧宽
dojox.data.CsvStore数据源
dataStores/movies.csv使用 query="{ Title: '*' }"
<span dojoType="dojox.data.CsvStore" jsId="csvStore1" url="dataStores/movies.csv"> </span> <table dojoType="dojox.grid.DataGrid" store="csvStore1" query="{ Title: '*' }" clientSort="true" rowSelector="20px" class="myGrid"> <thead> <tr> <th width="200px" field="Title"> 电影标题 </th> <th width="80px"> 时间 </th> </tr> <tr> <th colspan="2"> Producer </th> </tr> </thead> </table>
基本的Grid
dojox.data.ItemFileReadStore数据源
<div dojoType="dojo.data.ItemFileReadStore" url="dataStores/ice.json" jsId="jsonStore"></div> <p> dataStores/ice.json </p> <table dojoType="dojox.grid.DataGrid" store="jsonStore" clientSort="true" rowSelector="30px" class="myGrid"> <thead> <tr> <th width="200px" field="name"> 电影标题 </th> <th width="120px" field="baseFlavor"> baseFlavor </th> <th width="120px" field="mixins"> mixins </th> <th width="80px" field="calories"> calories </th> <th width="80px" field="fat"> fat </th> <th width="80px" field="source"> source </th><th width="80px" field="rating"> rating </th> </tr> </thead> </table>
</body>
</html>
ice.json
{ identifier: "name", label: "name", items: [ { name: "banana split",baseFlavor:"banana", mixins:"fudge, strawberries, cherries", calories:280,fat:16 ,source:1,rating:3 }, { name: "black raspberry chip", baseFlavor:"black raspberry and vanilla", mixins:"chocolate chips", calories:280,fat:18 ,source:1,rating:3 }, // Lots more... // END:modelDef { name:"black walnut",baseFlavor:"walnut",mixins:"black walnuts",calories:300,fat:22,source:1,rating:3}, { name:"butter pecan",baseFlavor:"butter",mixins:"pecan pieces",calories:310,fat:23,source:1,rating:3 }, { name:"caramel cone",baseFlavor:"caramel",mixins:"carmel, chocolate covered cone pieces",calories:320,fat:19,source:1,rating:3}, { name:"cherry vanilla",baseFlavor:"vanilla",mixins:"cherries",calories:240,fat:15,source:1,rating:3 }, { name:"chocolate",baseFlavor:"chocolate",mixins:"none",calories:270,fat:18,source:1,rating:3 }, { name:"chocolate chip cookie dough",baseFlavor:"vanilla",mixins:"chocolate chip cookie dough chunks", calories:310,fat:20 ,source:1,rating:3 }, { name:"chocolate chocolate chip",baseFlavor:"chocolate",mixins:"chocolate chip",calories:300,fat:20 ,source:1,rating:3 }, { name:"chocolate peanut butter",baseFlavor:"chocolate",mixins:"peanut butter swirl",calories:270,fat:16 ,source:1,rating:3 }, { name:"cinnamon dulce de leche",baseFlavor:"cinammon",mixins:"caramel swirl",calories:300,fat:18 ,source:1,rating:3 }, { name:"coffee",baseFlavor:"coffee",mixins:"none",calories:280,fat:22 ,source:1,rating:3 }, { name:"cookies & cream",baseFlavor:"vanilla",mixins:"cookie bits",calories:250,fat:23 ,source:1,rating:3 }, { name:"crème brulée",baseFlavor:"custard",mixins:"carmelized sugar swirl",calories:320,fat:19 ,source:1,rating:3 }, { name:"dulce de leche",baseFlavor:"caramel",mixins:"caramel swirl",calories:270,fat:15 ,source:1,rating:3 }, { name:"english toffee",baseFlavor:"vanilla",mixins:"english toffee pieces",calories:270,fat:18 ,source:1,rating:3 }, { name: "Irish cream",baseFlavor:"irish cream",mixins:"none",calories:260,fat:17 ,source:1,rating:3 }, { name:"macadamia brittle",baseFlavor:"vanilla",mixins:"butter-coated macadamia nuts",calories:280,fat:16 ,source:1,rating:3 }, { name:"mango",baseFlavor:"mango",mixins:"none",calories:90,fat:5 ,source:1,rating:3 }, { name:"mayan chocolate",baseFlavor:"chocolate",mixins:"cinammon chocolate swirl",calories:270,fat:23 ,source:1,rating:3 }, { name:"mint chip",baseFlavor:"mint",mixins:"chocolate chips",calories:300,fat:22 ,source:1,rating:3 }, { name:"mocha chip",baseFlavor:"coffee",mixins:"chocolate chips",calories:290,fat:15 ,source:1,rating:3 }, { name:"peaches & cream",baseFlavor:"peach",mixins:"peach pieces",calories:280,fat:19 ,source:1,rating:3 }, { name:"pineapple coconut",baseFlavor:"coconut",mixins:"pineapple and coconut",calories:280,fat:16 ,source:1,rating:3 }, { name:"pistachio",baseFlavor:"pistachio",mixins:"pistachio pieces",calories:320,fat:18 ,source:1,rating:3 }, { name:"rocky road",baseFlavor:"chocolate",mixins:"marshmallow, almonds",calories:300,fat:23 ,source:1,rating:3 }, { name:"rum raisin",baseFlavor:"rum",mixins:"raisins",calories:260,fat:20 ,source:1,rating:3 }, { name:"sticky toffee pudding",baseFlavor:"custard",mixins:"toffee swirl",calories:300,fat:15 ,source:1,rating:3 }, { name:"strawberry",baseFlavor:"strawberry",mixins:"strawberry pieces",calories:210,fat:18 ,source:1,rating:3 }, { name:"triple chocolate",baseFlavor:"chocolate",mixins:"chocolate swirl, chocolate chips",calories:300,fat:21 ,source:1,rating:3 }, { name:"vanilla",baseFlavor:"vanilla",mixins:"none",calories:300,fat:23 ,source:1,rating:3 }, { name:"vanilla bean",baseFlavor:"vanilla",mixins:"vanilla bean specks",calories:300,fat:18 ,source:1,rating:3 }, { name:"vanilla chocolate chip",baseFlavor:"vanilla",mixins:"chocolate chip",calories:290,fat:17 ,source:1,rating:3 }, { name:"vanilla fudge",baseFlavor:"vanilla",mixins:"fudge swirl",calories:300,fat:15 ,source:1,rating:3 }, { name:"vanilla fudge brownie",baseFlavor:"vanilla",mixins:"brownie pieces",calories:270,fat:20 ,source:1,rating:3 }, { name:"vanilla swiss almond",baseFlavor:"vanilla",mixins:"chocolate covered almonds",calories:280,fat:30 ,source:1,rating:3 }, { name:"white chocolate raspberry truffle",baseFlavor:"white chocolate",mixins:"raspberry swirl",calories:290,fat:16 ,source:1,rating:3 } ] ,source:1,rating:3 }
视图功能
锁定行，第一第二行不允许滚动：
grid_2_View.htm
<link rel="stylesheet" type="text/css" href="grid.css/grid.css" mce_href="grid.css/grid.css"> <mce:script type="text/javascript" src="../../dojoroot/dojo/dojo.js" mce_src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"><!-- // --></mce:script> <mce:script type="text/javascript"><!-- dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dojox.data.CsvStore"); // --></mce:script> <!-- NOTE: the following script tag is not intended for usage in real world!! it is part of the CodeGlass and you should just remove it when you use the code --> <mce:script type="text/javascript"><!-- dojo.addOnLoad(function() { if (window.pub) { window.pub(); } }); // --></mce:script> </head> <body class="tundra "> <h2>dojo Grid-网络-视图</h2> <p> 注意：要把支持数据的小部件都dojo.data查询做第一次数据读取，必须指定数据储存器的标识符，,query 和queryOptions初始化注入的属性,默认的为name 这里指定查询Title rowSelector="30px"左侧宽 colgroup: 通过colgroup span属性获取列数 noscroll属性可以删除视图底部和右侧的滚动条,这里锁定两列不滚动。不过须在宽度不够前提下. </p> <p> dataStores/movies.csv使用 query="{ Title: '*' }" </p> <div dojoType="dojo.data.ItemFileReadStore" url="dataStores/ice.json" jsId="jsonStore"></div> <table id="grid" dojoType="dojox.grid.DataGrid" store="jsonStore" clientSort="true" rowSelector="30px" class="myGrid"clientSort="true" style="width: 100em; height: 25em;"> <colgroup span="2" noscroll="true"></colgroup> <colgroup span="5"></colgroup> <thead> <tr> <th width="200px" field="name"> 电影标题 </th> <th width="200px" field="baseFlavor"> baseFlavor </th> <th width="220px" field="mixins"> mixins </th> <th width="180px" field="calories"> calories </th> <th width="120px" field="fat"> fat </th> <th width="80px" field="source"> source </th><th width="80px" field="rating"> rating </th> </tr> </thead> </table> </body>
CSS---grid.css/grid.css
@import "../../../dojoroot/dijit/themes/tundra/tundra.css";
@import "../../../dojoroot/dojox/grid/resources/Grid.css";
@import "../../../dojoroot/dojox/grid/resources/tundraGrid.css";
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
html,body{margin:0px;padding:0px;width:100%;height:100%;}
.myGrid{width:98%;height:300px;margin: 0;}
.myGrid th{ font-size:120%;}