明確單元格DOM結構
要想弄清楚formatter和styler屬性是怎么工作的，首先要弄清楚datagrid組件內容單元格的DOM接口，注意，這里指的是內容單元格，不包括標題單元格，標題單元格的結構有所區別。我們所有內容單元格的默認DOM結構如下：
| 1 2 3 4 5 | <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的真正意義。
定義示例:
| 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需要注意以下幾點：
- 無論formatter出何種形式，格式化出的DOM一定都是被包含在默認的div標簽內
- 在寫formatter函數時要保證有值返回，否則單元格沒有內容可展示，所以if的時候別忘了else
- formatter函數不會作用在列屬性checkbox為true的單元格上，checkbox列是組件預留的。
理解styler是什么
顧名思義，styler是樣式的意思，聽起來跟formatter容易混淆，其實它只是利用jQuery的css函數修改默認td標簽的樣式，所以styler屬于低能兒，只能定義單元格的背景色等，而且往往被默認的div標簽樣式覆蓋。
定義示例：
| 1 2 3 4 5 6 | styler: function(value, row, index){????if?(value == "007") {????????return?'background-color:blue;';????}}<br><br> |
| 1 | <br><br> |
)
)
