又爽又黄又无遮挡网站,3d蒂法精品啪啪一区二区免费

最近使用了dojo組件，其中使用了 dojox.grid.DataGrid 進(jìn)行一覽表示的核心組件，這里總結(jié)一些實(shí)際使用中遇到的問題和解決方法。
官方Guide: http://dojotoolkit.org/reference-guide/1.8/dojox/grid/DataGrid.html

【準(zhǔn)備】
引用 DataGrid 的 CSS，dojo js，導(dǎo)入要使用的組件：

[html] view plain copy

<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要設(shè)置為對應(yīng)的theme，比如：<body class=“claro">

【DataGrid的一般屬性】
這里我主要使用DOM聲明的方式，當(dāng)然用js定義layout也是可以的。dojo會在window.onload 時(shí)解析 dojoType="dojox.grid.DataGrid" 并讀取相關(guān)屬性設(shè)置并顯示最終的效果。
下面的 <table><thead>...</thead></table> 即為設(shè)計(jì)時(shí)定義 DataGrid 的 layout，運(yùn)行時(shí)被 dojo 解析生成實(shí)際的 HTML。

[javascript] view plain copy

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

<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組件的類型，這里當(dāng)然是 dojox.grid.DataGrid 或者是 DataGrid 的繼承類)
structure: js定義的表格
store: 數(shù)據(jù)源，可以是：dojo.data.ItemFileReadStore (只讀)，dojo.data.ItemFileWriteStore (可寫)等
selectionMode: 表格的選擇方式：
none(不選擇)，
single(單行選擇)，
multiple(多選,點(diǎn)一行加一行的選擇)，
extended(擴(kuò)展選擇,按下ctrl鍵+選擇，增加選擇行)(默認(rèn)方式)
sortInfo: 設(shè)置排序的方式：升序，降序
canSort: 可以指定那一列排序或者不能排序
rowHeight: 定義行高，這是一個(gè)重要屬性（對性能有影響）
rowsPerPage: 一次加載的每頁的行數(shù)（默認(rèn): 25行）
columnReordering: 允許拖拽調(diào)整列的順序（默認(rèn): false）

...

■DataGrid的Cell屬性
field: 對應(yīng)數(shù)據(jù)源里的列
width: 寬度定義，可以用px 或者 %
formatter: 設(shè)定一個(gè) js function，返回 HTML 用于再次編輯顯示內(nèi)容
比如為某列加上個(gè)link：
<th field="f1" formatter="addLink">field1</th>

[javascript] view plain copy

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

styles: 列（表頭和明細(xì)）的style定義
headStyles: 表頭的style定義
cellStyles: 明細(xì)的style定義 (正如上面的示例，表頭默認(rèn)左對齊，明細(xì)定義為居中對齊）
classes, headClasses, cellClasses: 同上類似，設(shè)置css class
editable: 列是否可編輯(true/false)
cellType: 可編輯時(shí)，設(shè)定對應(yīng)的類型（比如：Checkbox, Select, Date等）
get: js function 返回想要在這個(gè)單元格里需要顯示的值
hidden: 控制該列顯示不顯示(true/false)
...

接下來看看幾種特殊的表格的定義方式：
①　普通的多行組（表頭行數(shù)=明細(xì)行數(shù)）

[html] view plain copy

<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)（表頭行數(shù)=明細(xì)行數(shù)）

[html] view plain copy

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

③　多行組（表頭行數(shù)＜明細(xì)行數(shù)：表頭1行，明細(xì)2行一組）
tip: 表頭的一行用headStyle隱藏, 但注意仍會留下一行細(xì)細(xì)的行

[html] view plain copy

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

④　多行組（表頭行數(shù)＞明細(xì)行數(shù)：表頭2行，明細(xì)1行）

[html] view plain copy

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

⑤　設(shè)置固定列
通過 <colgroup> 定義：
<colgroup span="2" noscroll="true"></colgroup>
<colgroup span="5"></colgroup>

如下圖所示，前2列為固定，后面幾列可以滾動(dòng)。

⑥　多段組+固定列
因?yàn)槎喽谓M的原因，第2行中要增加一個(gè)空列

[html] view plain copy

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

-- 本章結(jié)束 --

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版