轉(zhuǎn)帖|使用教程|編輯:龔雪|2016-01-28 09:20:22.000|閱讀 886 次
概述:對(duì)于表格控件,很基本的操作就是增加和刪除,在WinForm平臺(tái)下我們能夠很輕易地實(shí)現(xiàn)。那么基于HTML5,我們又要怎么去實(shí)現(xiàn)這個(gè)功能呢?本文就介紹flexgrid的基本操作:增加刪除。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
對(duì)于表格控件,很基本的操作就是增加和刪除,在WinForm平臺(tái)下我們能夠很輕易地實(shí)現(xiàn)。那么基于HTML5,我們又要怎么去實(shí)現(xiàn)這個(gè)功能呢?本文就介紹flexgrid的基本操作:增加刪除。
在學(xué)習(xí)增加和刪除之前,我們需要了解wijmo5的另一個(gè)重要的概念:CollectionView。它由ICollectionView接口繼承而來(lái),用標(biāo)準(zhǔn)的JavaScript數(shù)組提供數(shù)據(jù)。由于CollectionView類繼承自以下三個(gè)接口:
因此就能夠容易的獲取當(dāng)前的數(shù)據(jù),排序、過(guò)濾、分組、添加刪除以及分頁(yè)。有了這個(gè)基礎(chǔ),我們就來(lái)介紹利用它繼承的IEditableCollectionView接口來(lái)實(shí)現(xiàn)增加和刪除。
通過(guò)CollectionView的addNew方法,可以添加一個(gè)新的item到集合。這個(gè)方法沒(méi)有參數(shù),在添加新的數(shù)據(jù)后,還需要使用commitNew和cancelNew的方法進(jìn)行數(shù)據(jù)的提交或是取消。典型的使用方法:
// 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();
通過(guò)CollectionView.Items拿到當(dāng)前的數(shù)據(jù),并且通過(guò)push添加一個(gè)新的數(shù)據(jù)。代碼參考:
var cv = grid.itemsSource;
var data = cv.items;
data.push({
id: cv.items.length,
country: countries[i % countries.length]
});
cv.refresh();
CollectionView提供了remove和removeAt方法,可以根據(jù)項(xiàng)目刪除指定的項(xiàng)目,也可以根據(jù)項(xiàng)目的索引刪除項(xiàng)目。使用CollectionView.currentItem就可以得到當(dāng)前選擇的項(xiàng)目,因此刪除選擇項(xiàng)目的代碼參考:
var cv = grid.itemsSource; cv.remove.remove(cv.currentItem); cv.refresh();
根據(jù)本文的介紹,就能很容易的對(duì)flexgrid進(jìn)行增加和刪除。
文本的源代碼下載:
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都控件網(wǎng)