Wijmo5 Flexgrid基礎教程：增長和刪除

<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進行增長和刪除。

文本的源代碼下載：flexgrid_addremove.zip (73.05 kb)

PS: 關於ComponentOne，這些產品你能夠關注>>

本文轉載自葡萄城