dojox.grid.DataGrid 编程篇(1) -

云水禅心

浏览: 26079 次
性别:
来自: 西安

最近访客更多访客>>

OnlyLoveVivian

youcp999

lucy_you

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

dojox.grid.DataGrid 编程篇(1)

博客分类：

dojo

dojo javascript

dojox.grid.DataGrid 编程篇(1) -- Layout设计
最近使用了dojo组件，其中使用了 dojox.grid.DataGrid 进行一览表示的核心组件，这里总结一些实际使用中遇到的问题和解决方法。
官方Guide: http://dojotoolkit.org/reference-guide/1.8/dojox/grid/DataGrid.html

【准备】
引用 DataGrid 的 CSS，dojo js，导入要使用的组件：
[html] view plaincopy

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dojo.css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css">

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" djConfig="parseOnLoad:true,locale:'ja-jp',isDebug:true"></script>
    <script type="text/javascript">

    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojox.grid.DataGrid");
    </script>

注意，<body>的class要设置为对应的theme，比如：<body class=“claro">

【DataGrid的一般属性】
这里我主要使用DOM声明的方式，当然用js定义layout也是可以的。dojo会在window.onload 时解析 dojoType="dojox.grid.DataGrid" 并读取相关属性设置并显示最终的效果。
下面的 <table><thead>...</thead></table> 即为设计时定义 DataGrid 的 layout，运行时被 dojo 解析生成实际的 HTML。
[javascript] view plaincopy

    function getDataStore(count) {
        var items = [];
        for(var i=0; i<count; i++) {
           items.push({
             f0: false,
             f1: i%2==0?"field1_ 1 " + i:"1",
             f2: "field2_" + i,
             f3: "field3_" + i,
             f4: "field4_" + i,
             f5: "field5_" + i,
             f6: "field6_" + i,
             f7: "field7_" + i
           });
        }
        var data = new dojo.data.ItemFileWriteStore({data: {items:items}});
        return data;
    }

[html] view plaincopy

    <table dojoType='dojox.grid.DataGrid' id='grid1' jsid='js_grid1'
     style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)"
     canSort='false' selectionMode='single' >
     <thead>
        <tr>
          <th field="f1" cellStyles="text-align:center;" width="100px" >列1</th>
          <th field="f2" cellStyles="text-align:center;" width="100px" >列2</th>
          <th field="f3" cellStyles="text-align:center;" width="100px" >列3</th>
          <th field="f4" cellStyles="text-align:center;" width="100px" >列4</th>
          <th field="f5" cellStyles="text-align:center;" width="100px" >列5</th>
          <th field="f6" cellStyles="text-align:center;" width="100px" >列6</th>
        </tr>
    </thead>
    </table>

■DataGrid 属性(table 里的属性)
dojoType: dojox.grid.DataGrid （定义dojo组件的类型，这里当然是 dojox.grid.DataGrid 或者是 DataGrid 的继承类)
structure: js定义的表格
store: 数据源，可以是：dojo.data.ItemFileReadStore (只读)，dojo.data.ItemFileWriteStore (可写)等
selectionMode: 表格的选择方式：
     none(不选择)，
     single(单行选择)，
    multiple(多选,点一行加一行的选择)，
    extended(扩展选择,按下ctrl键+选择，增加选择行)(默认方式)
sortInfo: 设置排序的方式：升序，降序
canSort: 可以指定那一列排序或者不能排序
rowHeight: 定义行高，这是一个重要属性（对性能有影响）
rowsPerPage: 一次加载的每页的行数（默认: 25行）
columnReordering: 允许拖拽调整列的顺序（默认: false）

...

■DataGrid的Cell属性
field: 对应数据源里的列
width: 宽度定义，可以用px 或者 %
formatter: 设定一个 js function，返回 HTML 用于再次编辑显示内容
比如为某列加上个link：
<th field="f1" formatter="addLink">field1</th>
[javascript] view plaincopy

    function addLink(value, index) {
        return "<a href='javascript:void(0);'>" + value + "</a>";
    }

styles: 列（表头和明细）的style定义
headStyles: 表头的style定义
cellStyles: 明细的style定义 (正如上面的示例，表头默认左对齐，明细定义为居中对齐）
classes, headClasses, cellClasses: 同上类似，设置css class
editable: 列是否可编辑(true/false)
cellType: 可编辑时，设定对应的类型（比如：Checkbox, Select, Date等）
get: js function 返回想要在这个单元格里需要显示的值
hidden: 控制该列显示不显示(true/false)
...

接下来看看几种特殊的表格的定义方式：
①　普通的多行组（表头行数=明细行数）

[html] view plaincopy

    <table dojoType='dojox.grid.DataGrid' id='grid2' jsid='js_grid2'
     style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)"
     selectionMode='single' >
     <thead>
        <tr>
          <th field="f1" width="25%" >列1</th>
          <th field="f2" width="25%" >列2</th>
          <th field="f3" width="25%" >列3</th>
          <th field="f4" width="25%" >列4</th>
        </tr>
        <tr>
          <th field="f5" >列5</th>
          <th field="f6" >列6</th>
          <th field="f7" >列7</th>
          <th field="f8" >列8</th>
        </tr>
    </thead>
    </table>

②　多行组+合并单元格(rowspan+colspan)（表头行数=明细行数）

[html] view plaincopy

    <table dojoType='dojox.grid.DataGrid' id='grid3' jsid='js_grid3'
     style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)"
     selectionMode='single' >
     <thead>
        <tr>
          <th field="f1" rowspan="2" width="25%" >列1</th>
          <th field="f2" cellStyles="text-align:center;" width="25%" >列2</th>
          <th field="f4" cellStyles="text-align:center;" width="25%" >列4</th>
          <th field="f5" cellStyles="text-align:center;" width="25%" >列5</th>
        </tr>
        <tr>
          <th field="f3" cellStyles="text-align:center;" >列3</th>
          <th field="f6" colspan="2" cellStyles="text-align:center;" >列6</th>
        </tr>
    </thead>
    </table>

③　多行组（表头行数＜明细行数：表头1行，明细2行一组）
tip: 表头的一行用headStyle隐藏, 但注意仍会留下一行细细的行

[html] view plaincopy

    <table dojoType='dojox.grid.DataGrid' id='grid4' jsid='js_grid4'
     style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)"
     selectionMode='single' canSort="false">
     <thead>
        <tr>
          <th field="f1" headStyles="display:hidden" ><div/></th>
          <th field="f2" headStyles="display:hidden" ><div/></th>
          <th field="f3" headStyles="display:hidden" ><div/></th>
          <th field="f4" headStyles="display:hidden" ><div/></th>
        </tr>
        <tr>
          <th field="f1" width="25%">列5</th>
          <th field="f2" width="25%">列6</th>
          <th field="f3" width="25%">列7</th>
          <th field="f4" width="25%">列8</th>
        </tr>
    </thead>
    </table>

④　多行组（表头行数＞明细行数：表头2行，明细1行）

[html] view plaincopy

    <table dojoType='dojox.grid.DataGrid' id='grid4' jsid='js_grid4'
     style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)"
     selectionMode='single' canSort="false">
     <thead>
        <tr>
          <th colspan="2" cellStyles="display:none;">merge 1</th>
          <th colspan="2" cellStyles="display:none;">merge 2</th>
        </tr>
        <tr>
          <th field="f1" width="25%">列1</th>
          <th field="f2" width="25%">列2</th>
          <th field="f3" width="25%">列3</th>
          <th field="f4" width="25%">列4</th>
        </tr>
    </thead>
    </table>

⑤　设置固定列
通过 <colgroup> 定义：
<colgroup span="2" noscroll="true"></colgroup>
<colgroup span="5"></colgroup>

如下图所示，前2列为固定，后面几列可以滚动。

⑥　多段组+固定列
因为多段组的原因，第2行中要增加一个空列
[html] view plaincopy

    <table jsId="grid" id="grid5" dojoType="dojox.grid.DataGrid"
         store="getDataStore(10)" style="width:450px;height:240px;">
        <colgroup span="1" noscroll="true"></colgroup>
        <colgroup span="5"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" field="f1" width="80px">列1</th>
        <th field="f2" width="80px">列2</th>
        <th field="f3" width="80px">列3</th>
        <th field="f4" width="80px">列4</th>
        <th field="f5" width="80px">列5</th>
        <th field="f5" width="80px">列6</th>
      </tr>
      <tr>
        <strong><th styles="display:none;"></th></strong>
        <th cellstyles="display:none;">列(2)</th>
        <th cellstyles="display:none;">列(3)</th>
        <th cellstyles="display:none;">列(4)</th>
        <th cellstyles="display:none;">列(5)</th>
        <th cellstyles="display:none;">列(6)</th>
      </tr>
    </thead>
    </table>

分享到：

dojo.ready(dojo.addOnLoad) “前传” | dojox.grid.DataGrid 编程篇(2)

2013-01-26 11:36
浏览 1325
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

dojox.grid.DataGrid 编程篇(1)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

dojox.grid.DataGrid 编程篇(1)

评论

发表评论

相关推荐

dojo学习总结-dojox.grid.DataGrid

使用 MVC 设计模式的 Dojo Grid

dojox.grid.DataGrid 编程篇(3) -- DataGrid的一些Bug

dojo.ready(dojo.addOnLoad) “前传”

dojox.grid.DataGrid 编程篇(2)

最近访客更多访客>>