flex Datagrid資料列雙擊事件實現
最近做flex的專案遇到了一個問題:要實現雙擊DataGrid的一行資料,將該行資料賦值到開啟的新視窗中。
在網上找了好久,發現要麼答非所問,要麼就是隻言片語。所以我想通過CSDN這個平臺把我的經驗總結一下。先貼一下程式碼:
<mx:DataGrid id="dg" width="100%" height="100%" rowCount="12" doubleClickEnabled="true" itemDoubleClick="readMail(null)" horizontalScrollPolicy="on" dataProvider="{dataArr}">
<mx:columns >
<mx:DataGridColumn textAlign="center" width="40"
dataField="selected" headerText="Select"
itemRenderer="views.common.checkBox.CheckBoxItemDataRenderer"
headerRenderer="views.common.checkBox.CheckBoxHeaderRenderer"/>
<mx:DataGridColumn headerText="ID" dataField="REC_ID" headerStyleName="headerStyle" visible="true"/>
<mx:DataGridColumn headerText="系統" dataField="SYS_NM" headerStyleName="headerStyle"/>
<mx:DataGridColumn headerText="名稱" dataField="QUERY_NM" headerStyleName="headerStyle"/>
<mx:DataGridColumn headerText="SQL語句" dataField="QUERY_STATEMENT" width="600" headerStyleName="headerStyle"/>
<mx:DataGridColumn headerText="備註" dataField="REMARKS" headerStyleName="headerStyle" />
</mx:columns>
</mx:DataGrid>
上面是flex標籤元素datagrid,預設情況下,它的的雙擊事件是遮蔽的。所以我們要先把雙擊事件放開,通過屬性doubleClickEnabled="true"。
然後,有人可能會直接使用doubleClick屬性來設定觸發雙擊事件,這樣做會有一個問題,就是無論你雙擊datagrid的什麼位置,都會觸發事件,滿足不了我們的需求。
最後,看到有個itemDoubleClick屬性,這個屬性剛好是行資料的雙擊事件,然後我就立馬試了一下,果然好用。好像撿到寶了。下面是雙擊事件觸發的方法,有一點需要講一下:
/**
* 雙擊事件
*/
private function readMail(event:MouseEvent):void
{
if(dg.selectedItem!=null){
var obj:Object = new Object();
//Alert.show("0-"+obj.QUERY_STATEMENT);
obj.title = "編輯查詢";
obj.statement = dg.selectedItem.QUERY_STATEMENT;
var editExcuteQuery:EditExcuteQuery = new EditExcuteQuery();
editExcuteQuery.obj = obj;
PopUpManager.addPopUp(editExcuteQuery, this, false);
PopUpManager.centerPopUp(editExcuteQuery);
}else{
Alert.show("空");
}
}
從程式碼可以看到,我進行了一個判斷。原因是什麼呢?itemDoubleClick這個雙擊事件竟然對空行也會起作用,這樣就會擾亂我們。因此,在此進行了過濾,在雙擊資料行的時候才會觸發事件,開啟新視窗並傳值進行。
其實這些對於flex大牛來說可能不算什麼,但是對於初涉flex小白來說,可算為難了。而且,flex網上分享的資源少之又少~
最後希望我的經驗能幫到其他人,同時也希望大家把自己的經驗分享出來。