dojox.grid.DataGrid 编程篇(1)

阅读更多

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

     
     
     
         
     
     

注意，的class要设置为对应的theme，比如：

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

    function getDataStore(count) { 
        var items = []; 
        for(var i=0; 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

         style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)" 
     canSort='false' selectionMode='single' > 
      
         
           
           
           
           
           
           
         
     
   

列1	列2	列3	列4	列5	列6

 


■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：
field1
[javascript] view plaincopy

    function addLink(value, index) { 
        return "" + value + ""; 
    } 

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

         style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)" 
     selectionMode='single' > 
      
         
           
           
           
           
         
         
           
           
           
           
         
     
   

列1	列2	列3	列4
列5	列6	列7	列8

 


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


[html] view plaincopy

         style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)" 
     selectionMode='single' > 
      
         
           
           
           
           
         
         
           
           
         
     
   

列1	列2	列4	列5
	列3	列6

 


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

[html] view plaincopy

         style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)" 
     selectionMode='single' canSort="false"> 
      
         
           
           
           
           
         
         
           
           
           
           
         
     
   

列5	列6	列7	列8

 


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


[html] view plaincopy

         style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)" 
     selectionMode='single' canSort="false"> 
      
         
           
           
         
         
           
           
           
           
         
     
   

merge 1		merge 2
列1	列2	列3	列4

 


⑤　设置固定列
通过  定义：



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


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

             store="getDataStore(10)" style="width:450px;height:240px;"> 
         
         
     
       
         
         
         
         
         
         
       
       
         
         
         
         
         
         
                                   
       
   

列1	列2	列3	列4	列5	列6
		列(2)	列(3)	列(4)	列(5)	列(6)