<Wijmo Enterprise下載>

對于表格控件，很基本的操作就是增加和刪除，在WinForm平臺下我們能夠很輕易地實現。那么基于HTML5，我們又要怎么去實現這個功能呢？本文就介紹flexgrid的基本操作：增加刪除。

在學習增加和刪除之前，我們需要了解wijmo5的另一個重要的概念：CollectionView。它由ICollectionView接口繼承而來，用標準的JavaScript數組提供數據。由于CollectionView類繼承自以下三個接口：

• ICollectionView
• IEditableCollectionView
• IPagedCollectionView

因此就能夠容易的獲取當前的數據，排序、過濾、分組、添加刪除以及分頁。有了這個基礎，我們就來介紹利用它繼承的IEditableCollectionView接口來實現增加和刪除。

增加

1.addNew

通過CollectionView的addNew方法，可以添加一個新的item到集合。這個方法沒有參數，在添加新的數據后，還需要使用commitNew和cancelNew的方法進行數據的提交或是取消。典型的使用方法：

// create the new item, add it to the collection
var newItem = view.addNew();
// initialize the new item
newItem.id = getFreshId();
newItem.country= 'Chinese';
// commit the new item so the view can be refreshed
view.commitNew();

2.CollectionView.Items.push

通過CollectionView.Items拿到當前的數據，并且通過push添加一個新的數據。代碼參考：

var cv = grid.itemsSource;
var data = cv.items;

data.push({
id: cv.items.length,
country: countries[i % countries.length]
});
cv.refresh();

刪除

CollectionView提供了remove和removeAt方法，可以根據項目刪除指定的項目，也可以根據項目的索引刪除項目。使用CollectionView.currentItem就可以得到當前選擇的項目，因此刪除選擇項目的代碼參考：

var cv = grid.itemsSource;

cv.remove.remove(cv.currentItem);
cv.refresh();

根據本文的介紹，就能很容易的對flexgrid進行增加和刪除。

文本的源代碼下載：

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

本文轉載自

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

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