<Wijmo Enterprise下載>

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

當(dāng)然，這樣的單元格類型并不能滿足用戶的需求，那么如何添加更加豐富的單元格類型呢？本文就來(lái)介紹如何通過(guò)flexgrid的itemFormatter功能，實(shí)現(xiàn)自定義編輯器。

首先，我們通過(guò)數(shù)據(jù)綁定的文章，了解如何進(jìn)行數(shù)據(jù)綁定，接著來(lái)了解itemFormatter。通過(guò)獲取或設(shè)置formatter功能來(lái)自定義單元格。這個(gè)功能提供了完整自由的形式，可以自定義單元格的樣式還有行為。

這個(gè)功能里有四個(gè)參數(shù)：GridPanel包含cell, 單元格的row和column，代表單元格的HTML元素。這個(gè)功能可以改變單元格的元素的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);
}
}
}

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

<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);
}
}
}

根據(jù)以上描述，日期列就會(huì)變成wijmo的InputDate控件，源碼請(qǐng)下載：

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

PS: 關(guān)于ComponentOne，這些產(chǎn)品你可以關(guān)注>>

本文轉(zhuǎn)載自

葡萄城經(jīng)典UI產(chǎn)品新年大促，驚喜折扣禮品送不停！優(yōu)惠詳情點(diǎn)擊查看>>

新年新禧新氣象，送禮送福送優(yōu)惠！優(yōu)惠詳情點(diǎn)擊查看>>