要 COOL就酷到底- -dojo data grid 1 -基本输出_dojo grid sort client-优快云博客

本文链接：https://blog.youkuaiyun.com/flash8627/article/details/5305867

本文介绍DojoGrid的应用实例，包括不同数据源配置方法、显示设置及锁定行等高级功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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"> 电影标题 </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

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