對于jQuery easyui的datagrid元件大家應該都不陌生,對于他的兩個列屬性:formatter和styler,大家應該也都不陌生,他們都是一個函數,我們為了讓單元格表現為我們想要的形式,經常會用到它們,那麼他們之間究竟有什麼聯系和差別呢,本文做簡單談論。
明确單元格DOM結構
要想弄清楚formatter和styler屬性是怎麼工作的,首先要弄清楚datagrid元件内容單元格的DOM接口,注意,這裡指的是内容單元格,不包括标題單元格,标題單元格的結構有所差別。我們所有内容單元格的預設DOM結構如下:
<td field="code">
<div style="text-align:left" class="datagrid-cell datagrid-cell-c1-code">
文字
</div>
</td>
很簡單,其實隻是兩層結構,td标簽的field屬性便是字段的編碼,而單元格内容統一用一個div包裹起來,在我舉的這個例子中,div标簽有個text-align樣式,這個樣式其實是由列屬性align決定的,同時div标簽的class屬性值并不是一個定值,需要注意一下。
了解formatter是什麼
顧名思義,formatter是格式化的意思,也就是以何種形式呈現的意思,對于一個純文字,我可以将它呈現為checkbox,也可以呈現為input輸入框,甚至下拉框等等,或者是在文本外層包裹更多的DOM(當然包裹這樣做并沒有多大意義),這就是formatter的真正意義。
定義示例:
formatter: function(value, row, index){
if (value == "007") {
return '<font color="red">' + value + '</font>';
}
else {
return value;
}
}
使用formatter需要注意以下幾點:
- 無論formatter出何種形式,格式化出的DOM一定都是被包含在預設的div标簽内
- 在寫formatter函數時要保證有值傳回,否則單元格沒有内容可展示,是以if的時候别忘了else
- formatter函數不會作用在列屬性checkbox為true的單元格上,checkbox列是元件預留的。
了解styler是什麼
顧名思義,styler是樣式的意思,聽起來跟formatter容易混淆,其實它隻是利用jQuery的css函數修改預設td标簽的樣式,是以styler屬于低能兒,隻能定義單元格的背景色等,而且往往被預設的div标簽樣式覆寫。
定義示例:
styler: function(value, row, index){
if (value == "007") {
return 'background-color:blue;';
}
}
使用styler實在沒有什麼注意點,因為它确實太低能了,個人意見是僅僅用他定義單元格背景色或者背景圖檔就足夠了。
轉載位址:http://www.easyui.info/archives/491.html