要 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>

<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"> 电影<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a> </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"> 电影<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a> </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",fat:18,// Lots more... // END:modelDef { name:"black walnut",baseFlavor:"walnut",mixins:"black walnuts",calories:300,fat:22,rating:3},{ name:"butter pecan",baseFlavor:"butter",mixins:"pecan pieces",calories:310,fat:23,{ name:"caramel cone",baseFlavor:"caramel",mixins:"carmel,chocolate covered cone pieces",calories:320,fat:19,{ name:"cherry vanilla",baseFlavor:"vanilla",mixins:"cherries",calories:240,fat:15,{ name:"chocolate",baseFlavor:"chocolate",mixins:"none",calories:270,{ name:"chocolate chip cookie dough",mixins:"chocolate chip cookie dough chunks",fat:20,{ name:"chocolate chocolate chip",mixins:"chocolate chip",{ name:"chocolate peanut butter",mixins:"peanut butter swirl",{ name:"cinnamon dulce de leche",baseFlavor:"cinammon",mixins:"caramel swirl",{ name:"coffee",baseFlavor:"coffee",{ name:"cookies & cream",mixins:"cookie bits",calories:250,{ name:"crème brulée",baseFlavor:"custard",mixins:"carmelized sugar swirl",{ name:"dulce de leche",{ name:"english toffee",mixins:"english toffee pieces",{ name: "Irish cream",baseFlavor:"irish cream",calories:260,fat:17,{ name:"macadamia brittle",mixins:"butter-coated macadamia nuts",{ name:"mango",baseFlavor:"mango",calories:90,fat:5,{ name:"mayan chocolate",mixins:"cinammon chocolate swirl",{ name:"mint chip",baseFlavor:"mint",{ name:"mocha chip",calories:290,{ name:"peaches & cream",baseFlavor:"peach",mixins:"peach pieces",{ name:"pineapple coconut",baseFlavor:"coconut",mixins:"pineapple and coconut",{ name:"pistachio",baseFlavor:"pistachio",mixins:"pistachio pieces",{ name:"rocky road",mixins:"marshmallow,almonds",{ name:"rum raisin",baseFlavor:"rum",mixins:"raisins",{ name:"sticky toffee pudding",mixins:"toffee swirl",{ name:"strawberry",baseFlavor:"strawberry",mixins:"strawberry pieces",calories:210,{ name:"triple chocolate",mixins:"chocolate swirl,chocolate chips",fat:21,{ name:"vanilla",{ name:"vanilla bean",mixins:"vanilla bean specks",{ name:"vanilla chocolate chip",{ name:"vanilla fudge",mixins:"fudge swirl",{ name:"vanilla fudge brownie",mixins:"brownie pieces",{ name:"vanilla swiss almond",mixins:"chocolate covered almonds",fat:30,{ name:"white chocolate raspberry truffle",baseFlavor:"white chocolate",mixins:"raspberry swirl",rating:3 } ],rating:3 }

视图功能

锁定行，第一第二行不允许滚动：

grid_2_View.htm

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%;}

原文链接：https://www.f2er.com/dojo/291818.html