在Flex中簡單實現 dataGrid結合CheckBox使項目可選、全選、反選

 

        對使用者來講，軟體的功能性之外還要求其易用習慣性。非專業使用者習慣了用滑鼠點而不大適應鍵盤+滑鼠。Flex的DataGrid雖然可以允許使用者多選項目，但是這個多選需要結合Ctrl或Shift鍵來完成。而我們去網上瀏覽下歌曲網站在選擇多首歌曲的過程就知道使用者更喜歡那種方式了。

        本文簡單實現在DataGrid中結合CheckBox完成對項目的選擇、全選和反選功能。但它並不十分適合組件化，應付一下特例還是可以的，但其是可以最佳化的。

效果如所示：

        組件DataGridCheckBox.mxml代碼如下所示：

<?xml version="1.0" encoding="utf-8"?><s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"  xmlns:s="library://ns.adobe.com/flex/spark"  xmlns:mx="library://ns.adobe.com/flex/mx"><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.controls.Alert;//資料來源private var dsObjects:ArrayCollection = new ArrayCollection([{flag:false,name:"Chen",job:"developer"},{flag:false,name:"men",job:"mentor"},]);/* *實現所有項目的全選中過程 */public function all_click(event:Event):void{dsObjects = this.dgDistbRecordSearchList.dataProvider as ArrayCollection;this.unAll.selected = false;for(var i:int = 0 ;i<dsObjects.length;i++){dsObjects[i].flag = CheckBox(event.target).selected;}//重新綁定this.dgDistbRecordSearchList.dataProvider = dsObjects;}/* *實現項目反相選中*/public function unAll_click(event:Event):void{if(CheckBox(event.target).selected){this.all.selected = false;dsObjects = this.dgDistbRecordSearchList.dataProvider as ArrayCollection;for(var i:int = 0 ;i<dsObjects.length;i++){dsObjects[i].flag = !dsObjects[i].flag;}//重新綁定this.dgDistbRecordSearchList.dataProvider = dsObjects;}}//顯示被選中項目的名稱private function showSelectedName():void{var ac:ArrayCollection = this.dgDistbRecordSearchList.dataProvider as ArrayCollection;var selectedNames = "選中項目名稱為："for(var i:int = 0;i<ac.length;i++){if(ac[i].flag == true){selectedNames += ac[i].name + " ";}}Alert.show(selectedNames);}]]></fx:Script><mx:VBox><mx:DataGrid id="dgDistbRecordSearchList" width="100%" height="100%" allowMultipleSelection="true" dataProvider="{dsObjects}" ><mx:columns><mx:DataGridColumn headerText="選擇" width="42" ><mx:itemRenderer ><fx:Component ><mx:HBox horizontalAlign="center"><mx:CheckBox selected="@{data.flag}"  change="checkbox1_changeHandler(event,data)" width="13"><fx:Script><![CDATA[import mx.events.ListEvent;protected function checkbox1_changeHandler(event:Event,obj:Object):void{//調整按鈕選擇性outerDocument.unAll.selected = false;outerDocument.all.selected = false;//在單向綁定時可採用此法將選中資訊反應到資料來源/*  obj.flag =  CheckBox(event.target).selected;  */}]]></fx:Script></mx:CheckBox></mx:HBox></fx:Component></mx:itemRenderer></mx:DataGridColumn><mx:DataGridColumn id="nam" textAlign="left" headerText="姓名" dataField="name"/><mx:DataGridColumn id="job" textAlign="left" headerText="職位" width="80" dataField="job"/></mx:columns></mx:DataGrid><mx:HBox><s:CheckBox id="all" label="全選" width="45" height="30" click="all_click(event)"/><s:CheckBox id="unAll" label="反選" width="45" height="30" click="unAll_click(event)"/></mx:HBox><mx:Button label="選中項目的名稱" click="showSelectedName()" /></mx:VBox></s:Group>

 

        該代碼僅作為項目實踐的代碼原理模型，存在很多不足，例如資料來源是固定在組件內部的，同時作為資料來源的類中包含了一個flag屬性，它主要用於控制dataGrid中的項目是否被選中，而實際中這個資料來源應該是業務資料，而這個flag標識很可能在業務上是無需存在的。但這個組件提供了一個基本的實現思路，其前途在於對其進行改造，使之成為可以複用的控制項。

        同時，注意DataGrid中的項目被選中後，在業務上往往是要有後續操作的，這個需求在這個模型中表現在Button（"選中項目的名稱"）上，點擊後會彈出選中項目的名稱，其實現可以通過雙向繫結(71L)，也可以手動更新資料來源(81L)。

        此模型的關鍵不僅在提供一種實現思路，更在提示要在實現的基礎上繼續挖掘，要從殘缺中積累出完美！