<Wijmo Enterprise下載>

對于合并單元格的內容，我們在之前的章節已經介紹過。但是在一些情況下，合并單元格是依附某種條件。比如我們有兩列，想要根據第一列的情況，判定第二列是否合并。針對這種情況，flexgrid提供了自定義合并的概念，用戶可以自定義合并的邏輯。這個是通過重寫CustomMergeManager實現的。本文就來介紹如何自定義合并的邏輯。如下圖所示，我們有這樣的界面：

其中第一列序號列自動合并，我們想要預定列也根據序號列進行合并，而不僅僅是根據內容相同的合并。這個時候就需要自定義MergeManager實現合并。創建一個新類從MergeManager繼承，然后通過這個列自定義代碼實現不同的合并方式。邏輯代碼參考如下：

CustomMergeManager.prototype._mergeCell = function (p, r1, c1, r2, c2) {
var row1 = p.rows[r1], row2 = p.rows[r2], mergeState = _super.prototype._mergeCell.call(this, p, r1, c1, r2, c2), mergeKey = this._mergeKey;

if (mergeState && this._g.allowMerging) {
if (wijmo.isString(mergeKey) && this._g.itemsSource) {
if (row1.dataItem[mergeKey] !== row2.dataItem[mergeKey]) {
mergeState = false;
}
} else if (wijmo.isNumber(this._mergeKey)) {
if (p.getCellData(r1, mergeKey, false) !== p.getCellData(r2, mergeKey, false)) {
mergeState = false;
}
}
}

return mergeState;
};

將這個自定義的邏輯寫成JS文件，然后在主頁面引用：

<script src="scripts/customMergeManager.js" type="text/javascript"></script>

調用自定義的合并：

grid.mergeManager = new wijmo.grid.CustomMergeManager(grid, '序號');

結果如下：

圖中可以看出來，狀態列已經根據第一列進行了合并。

詳細的請參考如下的Demo：:

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

本文轉載自

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

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