明確單元格DOM結(jié)構(gòu)

要想弄清楚formatter和styler屬性是怎么工作的，首先要弄清楚datagrid組件內(nèi)容單元格的DOM接口，注意，這里指的是內(nèi)容單元格，不包括標(biāo)題單元格，標(biāo)題單元格的結(jié)構(gòu)有所區(qū)別。我們所有內(nèi)容單元格的默認(rèn)DOM結(jié)構(gòu)如下：

?

1 2 3 4 5

<td field="code"> ????<div style="text-align:left" class="datagrid-cell datagrid-cell-c1-code"> ?????????文字 ????</div> </td>

很簡(jiǎn)單，其實(shí)只是兩層結(jié)構(gòu)，td標(biāo)簽的field屬性便是字段的編碼，而單元格內(nèi)容統(tǒng)一用一個(gè)div包裹起來(lái)，在我舉的這個(gè)例子中，div標(biāo)簽有個(gè) text-align樣式，這個(gè)樣式其實(shí)是由列屬性align決定的，同時(shí)div標(biāo)簽的class屬性值并不是一個(gè)定值，需要注意一下。

?

理解formatter是什么

顧名思義，formatter是格式化的意思，也就是以何種形式呈現(xiàn)的意思，對(duì)于一個(gè)純文本，我可以將它呈現(xiàn)為checkbox，也可以呈現(xiàn)為 input輸入框，甚至下拉框等等，或者是在文本外層包裹更多的DOM(當(dāng)然包裹這樣做并沒(méi)有多大意義)，這就是formatter的真正意義。

定義示例:

?

1 2 3 4 5 6 7 8

formatter: function(value, row, index){ ????if (value == "007") { ????????return '<font color="red">' + value + '</font>'; ????} ????else { ????????return value; ????} }

使用formatter需要注意以下幾點(diǎn)：

• 無(wú)論formatter出何種形式，格式化出的DOM一定都是被包含在默認(rèn)的div標(biāo)簽內(nèi)
• 在寫(xiě)formatter函數(shù)時(shí)要保證有值返回，否則單元格沒(méi)有內(nèi)容可展示，所以if的時(shí)候別忘了else
• formatter函數(shù)不會(huì)作用在列屬性checkbox為true的單元格上，checkbox列是組件預(yù)留的。

理解styler是什么

顧名思義，styler是樣式的意思，聽(tīng)起來(lái)跟formatter容易混淆，其實(shí)它只是利用jQuery的css函數(shù)修改默認(rèn)td標(biāo)簽的樣式，所以styler屬于低能兒，只能定義單元格的背景色等，而且往往被默認(rèn)的div標(biāo)簽樣式覆蓋。

定義示例：

?

1 2 3 4 5 6

styler: function(value, row, index){ ????if (value == "007") { ????????return 'background-color:blue;'; ????} } <br><br>

?

1

<br><br>

總結(jié)

以上是生活随笔為你收集整理的easyui datagrid 表格组件列属性formatter和styler使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。