分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

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

Dojo   发布时间：2022-04-21  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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的一般@L_262_4@】
这里我主要使用DOM声明的方式，当然用js定义layout也是可以的。dojo会在window.onload 时解析 dojoType="dojox.grid.DataGrid" 并读取相关@L_262_4@设置并显示最终的效果。
下面的 <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 @L_262_4@(table 里的@L_262_4@)
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: 定义行高，这是一个重要@L_262_4@（对性能有影响）
rowsPerPage: 一次加载的每页的行数（默认: 25行）
columnReordering: 允许拖拽调整列的顺序（默认: false）

...

■DataGrid的Cell@L_262_4@
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设计全部内容，希望文章能够帮你解决dojox.grid.DataGrid 编程篇(1) -- Layout设计所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：1datagriddojoxgrid篇编程设计
猜你在找的Dojo相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap