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，导入要使用的组件：

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

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

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

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)
...

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

<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)（表头行数=明细行数）

<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隐藏,但注意仍会留下一行细细的行

<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行）

<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行中要增加一个空列

<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>
    <th styles="display:none;"></th>
    <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>

-- 本章结束 --

dojox.grid.DataGrid 编程篇(1) -- Layout设计

猜你在找的Dojo相关文章