<Wijmo Enterprise下載>

在默認情況下，flexgrid會根據數據類型，展示不同類型的數據。比如，將數據改成bool布爾型，綁定flexgrid，這一列就會展示為CheckBox列。詳細的可以參考本系列的第一篇文章：數據綁定，在簡單數據綁定中，綁定了一個數據源，里面包含bool類型的數據，綁定后會展示為CheckBox列。

當然，這樣的單元格類型并不能滿足用戶的需求，那么如何添加更加豐富的單元格類型呢？本文就來介紹如何通過flexgrid的itemFormatter功能，實現自定義編輯器。

首先，我們通過數據綁定的文章，了解如何進行數據綁定，接著來了解itemFormatter。通過獲取或設置formatter功能來自定義單元格。這個功能提供了完整自由的形式，可以自定義單元格的樣式還有行為。

這個功能里有四個參數：GridPanel包含cell, 單元格的row和column，代表單元格的HTML元素。這個功能可以改變單元格的元素的innerHTML屬性。例如：

flex.itemFormatter = function(panel, r, c, cell) {
if (panel.cellType == CellType.Cell) {
// draw sparklines in the cell
var col = panel.columns[c];
if (col.name == 'sparklines') {
cell.innerHTML = getSparklike(panel, r, c);
}
}
}

然后，我們就可以根據以上的內容，將數據綁定文章中的日期列的單元格類型改成我們需要的，比如采用Wijmo5的InputDate控件，使得更加容易的使用。要使用InputDate控件，首先需要在頁面中引用該控件的文件，然后對控件進行初始化。引用：

<script src="scripts/wijmo.input.min.js" type="text/javascript"></script>

代碼參考：

//日期類型
itemFormatter: function (panel, r, c, cell) {
var editRange = panel.grid.editRange;
if (panel.cellType == wijmo.grid.CellType.Cell && editRange && editRange.row === r && editRange.col === c) {
if (grid.columns[c].binding == '日期') {
cell.childNodes[0].style.display = 'none';
cell.style.overflow = 'visible';
var inputDate = new wijmo.input.InputDate(cell, {
value: new Date(cell.childNodes[0].value),
});
var editEndingEH = function (s, e) {
grid.cellEditEnding.removeHandler(editEndingEH);
if (!e.cancel) {
panel.grid.setCellData(r, c, inputDate.value);
e.cancel = true;
}
}
grid.cellEditEnding.addHandler(editEndingEH);
}
}
}

根據以上描述，日期列就會變成wijmo的InputDate控件，源碼請下載：

根據這種方式，將列改成自己所需要的形式。

PS: 關于ComponentOne，這些產品你可以關注>>

本文轉載自

葡萄城經典UI產品新年大促，驚喜折扣禮品送不停！優惠詳情點擊查看>>

新年新禧新氣象，送禮送福送優惠！優惠詳情點擊查看>>