試用過Google Spreadsheets的朋友,可能發現其一個有意思的特性,我們可以直接將Excel中的多行數據直接復制插入到Google Spreadsheets中(OpenOffice也可以直接復制過去),沒嘗試過的朋友可以馬上按如下步驟測試下:
在Excel(或OpenOffice Calc)中選擇多行數據,敲Ctrl+C鍵,復制選擇的多行數據:
然后到Google Spreadsheets,敲Ctrl+V鍵,前面復制的單元格就被復制過來了:
這是如何做到的呢?其實很簡單,在Excel(OpenOffice Calc)中,當多個單元格被復制時,這些單元格的數據是以tab鍵分隔一行行數據(tab-separated values (TSV))存放在剪貼板中的,當這些數據被粘貼到Google Spreadsheets中時,這些TSV格式的數據被解析并被相應插入到Google Spreadssheets中了。
既然知道其中的奧妙,那么剩下的就是在Flex中實現同樣的效果了。以下是我們的實現思路,可以在Excel和Flex相互直接復制粘貼數據。
我們的思路的精妙所在是隱藏文本(TextField)組件的使用:
- 在DataGrid中,當按下Ctrl鍵時,我們創建一個隱藏的文本(TextField)組件,并將焦點定位給它,這樣,我們就可以接受任何通過Ctrl+V粘貼過來的數據。相應的我們也將DataGrid選擇行數據以TSV格式拷貝到TextField組件中,并且將所有的文本選擇,這樣我們使用Ctrl+C操作就可以復制當前行所有數據了。
- 監聽隱藏文件組件的textInput事件。如果有任何數據被粘貼的話,那么在這里數據將被解析,并插入到DataGrid中。
- 當Ctrl鍵釋放后,移除隱藏的文本組件。
以下是完整實現示例代碼:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.events.KeyboardEvent;
private function dataGridKeyDownHandler(event:KeyboardEvent):void
{
if (event.ctrlKey && !dataGrid.getChildByName("clipboardProxy"))
{
// Add an invisible TextField object to the DataGrid
var textField:TextField = new TextField();
textField.name = "clipboardProxy";
dataGrid.addChild(textField);
textField.visible = false;
textField.type = TextFieldType.INPUT;
textField.multiline = true;
// Populate the TextField with selected data in TSV format
textField.text = getTextFromItems(dataGrid.selectedItems);
textField.setSelection(0, textField.text.length - 1);
// Listen for textInput event
textField.addEventListener(TextEvent.TEXT_INPUT,
clipboardProxyPasteHandler);
// Set player-level focus to the TextField
systemManager.stage.focus = textField;
}
}
private function dataGridKeyUpHandler(event:KeyboardEvent):void
{
if (!event.ctrlKey)
{
var textField:TextField = TextField(dataGrid
.getChildByName("clipboardProxy"));
if (textField)
dataGrid.removeChild(textField);
}
}
private function clipboardProxyPasteHandler(event:TextEvent):void
{
// Extract values from TSV format and populate the DataGrid
var items:Array = getItemsFromText(event.text);
for each (var item:Object in items)
dataGrid.dataProvider.addItem(item);
}
private function getItemsFromText(text:String):Array
{
var rows:Array = text.split("\n");
if (!rows[rows.length - 1])
rows.pop();
var columns:Array = dataGrid.columns;
var itemsFromText:Array = [];
for each (var rw:String in rows)
{
var fields:Array = rw.split("\t");
var n:int = Math.min(columns.length, fields.length);
var item:Object = {};
for (var i:int = 0; i < n; i++)
item[columns[i].dataField] = fields[i];
itemsFromText.push(item);
}
return itemsFromText;
}
private function getTextFromItems(items:Array):String
{
var columns:Array = dataGrid.columns;
var textFromItems:String = "";
for each (var it:Object in items)
{
for each (var c:DataGridColumn in columns)
textFromItems += it[c.dataField] + "\t";
textFromItems += "\n";
}
return textFromItems;
}
]]>
</mx:Script>
<mx:DataGrid id="dataGrid" editable="true"
keyDown="dataGridKeyDownHandler(event)"
keyUp="dataGridKeyUpHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Scheduled Date"
dataField="scheduledDate" />
<mx:DataGridColumn headerText="Home Team"
dataField="homeTeam" />
<mx:DataGridColumn headerText="Away Team"
dataField="awayTeam" />
<mx:DataGridColumn headerText="Field"
dataField="field" />
</mx:columns>
<mx:dataProvider>
<mx:Object scheduledDate="4/1/2006" homeTeam="Chester Bucks"
awayTeam="Long Valley Hitters" field="Dawn Field" />
</mx:dataProvider>
</mx:DataGrid>
</mx:Application>
運行實例(FlashPlayer9.0)
以下是最終實現的效果圖:
原文:Copy 'n paste between Excel and Flex