Top > SAStrutsあれこれ > Flexでスプレッドシートみたいな表での更新


Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 
-
|
|
-
|
|
|
|
-
|
|
!
|
|
!
    @Execute(validator = false)
    public String updateEmployee() throws JAXBException, IOException {
 
        ResponseBase rb = new ResponseBase();
        try {
            Employee emp = employeeService.findById(Integer.parseInt(employeeForm.id));
            //NULL以外のデータ、つまり変更された項目のみコピーします。
            Beans.copy(employeeForm, emp).excludesNull().execute();
            employeeService.update(emp);
        } catch (RuntimeException e) {
            rb.result = ResponseBase.FAULT;
            rb.message = e.toString().substring(0, Math.min(e.toString().length(), 600));
        }
        XmlUtil.sendXML(ResponseBase.class, rb);
        return null;
    }
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="components.*" applicationComplete="init()">
    
    <mx:Script source="as/AllListWithCombobox.as" />
    
    <mx:Label x="10" y="10" text="Tutorial: スプレッドシートみたいな表での更新" width="700" height="34" fontWeight="bold" fontFamily="MS ゴシック" fontSize="26"/>
    <local:DoubleClickDataGrid width="650" id="dg1" editable="true" x="10" y="52" itemEditEnd="updateEmployee(event);">
        <local:columns>
            <mx:DataGridColumn headerText="Id" dataField="id" editable="false" />
            <mx:DataGridColumn headerText="Name" dataField="name" editable="false"/>
            <mx:DataGridColumn headerText="JobType" dataField="jobType">
                <mx:itemEditor>
                    <mx:Component> 
                        <mx:ComboBox dataProvider="{outerDocument.jobTypes}">
                            <mx:creationComplete>
                                <![CDATA[
                                    var len:int = dataProvider.length;
                                    for(var i:int=0; i<len; i++) {                                        
                                        if( dataProvider[i].data  * data.jobType ) {
                                            selectedIndex = i;
                                            break;
                                        }
                                    }
                                ]]>
                            </mx:creationComplete>
                       </mx:ComboBox>
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Salary" dataField="salary"/>
            <mx:DataGridColumn headerText="Department" dataField="departmentId">
                <mx:itemEditor>
                    <mx:Component> 
                        <mx:ComboBox dataProvider="{outerDocument.departments}">
                            <mx:creationComplete>
                                <![CDATA[
                                    var len:int = dataProvider.length;
                                    for(var i:int=0; i<len; i++) {                                        
                                        if( dataProvider[i].data  * data.department.id ) {
                                            selectedIndex = i;
                                            break;
                                        }
                                    }
                                ]]>
                            </mx:creationComplete>
                       </mx:ComboBox>
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Address" labelFunction="addressColumnLabelFunction" editable="false"/>
        </local:columns>
    </local:DoubleClickDataGrid>
</mx:Application>
Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
-
|
|
|
|
|
|
!
 
 
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!
 
 
-
|
|
-
|
-
|
!
|
|
-
|
!
!
 
 
-
|
-
|
|
|
|
!
!
 
 
-
|
-
|
!
!
 
 
-
|
!
 
 
-
|
|
!
 
 
-
-
|
!
|
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
-
|
!
|
|
-
|
!
!
// ActionScript file
import mx.controls.Alert;
import mx.controls.ComboBox;
import mx.controls.DataGrid;
import mx.controls.TextInput;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.DataGridEvent;
import mx.events.DataGridEventReason;
import mx.rpc.AsyncToken;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.mxml.HTTPService;
 
//ジョブタイプコンボボックス表示用データ定義。dataProviderに渡せるようにバインディング。
[Bindable]
public var jobTypes:Array = [{label:"CLERK", data:"CLERK"}, {label:"SALESMAN", data:"SALESMAN"}, {label:"MANAGER", data:"MANAGER"}];
 
[Bindable]
public var departments:Array = new Array();
 
//SAStrutsへのリクエストデータ(findAll用)
public var findAllRequest:Array = [{findAll:"method"}];
 
//初期表示処理
private function init():void {
    
    //部署コンボボックス表示用データをサーバーから取得します。
    post2sastruts("department", findAllRequest, setDepartment, faultHandler);
    
    //従業員情報リストをサーバーから取得します。
    post2sastruts("searchEmployee", findAllRequest, resultHandler, faultHandler);
} 
  
//サーバーへのリクエスト処理(共通)
private function post2sastruts(action_name:String, data:Object, resultFunc:Function, errorFunc:Function):void {
    System.useCodePage = true;
    const base_url:String = "http://localhost:8080/sastruts-flex/";
    
    // HTTP通信用オブジェクトを生成
    var srv:HTTPService = new HTTPService();
    srv.addEventListener(ResultEvent.RESULT,resultFunc);
    srv.addEventListener(FaultEvent.FAULT,errorFunc);
    srv.showBusyCursor = true;
    srv.request = data;
    srv.resultFormat = "e4x"; 
    srv.url = base_url + action_name + "/"; //末尾に"/"が無いとアクションフォームにデータが格納されません。
    srv.method = "POST"; 
    
    // リクエストを実行〜結果はresultHandlerで受け取ります。
    var at:AsyncToken = srv.send(data);
}
            
// HTTPServiceが成功
private function resultHandler(e:ResultEvent):void {
    
    //サーバー側の処理結果をチェックします。
    if( e.result.result  * "success" ) {
        //処理を簡潔にするため、部署ID要素に部署名を設定します。
        for each (var x:XML in e.result.Content.Employee) {
            x.departmentId = String(x.department.name);
        }
        //DataGridにデータを渡します
        dg1.dataProvider = e.result.Content.Employee;
    } else {
        Alert.show("サーバー処理失敗\n\n理由 : " + e.result.message);
    }
}
 
// サーバーから受信した部署データリストにセット
private function setDepartment(e:ResultEvent):void {
    departments = new Array();
    for each (var d:XML in e.result.Content.Department) {
        var obj:Object = new Object();
        obj.label = d.name;
        obj.data = d.id;
        departments.push(obj);
    }
}
 
//サーバーへの更新リクエストに対するレスポンス受信時の処理
private function updateResultHandler(e:ResultEvent):void {
    //サーバー側の処理結果をチェックします。
    if( e.result.result != "success" ) {
        Alert.show("サーバー処理失敗\n\n理由 : " + e.result.message);
    }
}
 
// HTTPServiceでエラーが発生した
private function faultHandler(e:FaultEvent):void {
    Alert.show("HTTPService失敗\n\n理由 : " + e.fault.message);
}
 
//DataGridのAddressカラムにXMLの値をバインドする
private function addressColumnLabelFunction(item:Object, column:DataGridColumn):String {
    // itemにはEmployeeタグが来ます。子要素や属性はE4Xで取得
    return XML(item).address.name;
}
 
//セルの編集終了時のハンドル(itemEditEndイベント用)
private function updateEmployee(e:DataGridEvent):void {
    if( e.reason  * DataGridEventReason.CANCELLED ) { 
        return;
    }
    
    var dg:DataGrid = e.currentTarget as DataGrid
    
    //変更対象行のデータリストを取得
    var items:Object = e.itemRenderer.data;
    
    //リクエストデータを作成
    var data:Array = new Array();
    data["updateEmployee"] = "sastruts";//nameでアクションメソッドを指定。値は適当。
    data["id"] = items["id"];
    
    var newData:String = null;
    //編集したセルがComboBox or TextInputだったかで処理分けします。
    if( dg.itemEditorInstance is ComboBox ) {
        data[e.dataField] = ComboBox(dg.itemEditorInstance).selectedItem.data;
        newData = ComboBox(dg.itemEditorInstance).selectedLabel;
    } else {
        newData = data[e.dataField] = TextInput(dg.itemEditorInstance).text;
    }
    
    //データ内容が変更された時だけサーバーにリクエスト
    if( newData != items[e.dataField] ) {
        post2sastruts("employee", data, updateResultHandler, faultHandler);
    }
}
Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
-
|
|
|
|
|
|
|
|
|
|
|
|
|
-
|
-
|
|
!
|
-
|
|
|
|
|
-
|
|
-
|
|
|
|
|
|
|
|
!
!
|
!
|
-
|
|
|
|
-
|
-
|
|
!
!
|
|
|
|
!
!
!
package components {
import flash.events.MouseEvent;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.EventPriority;
import mx.events.DataGridEvent;
 
    /** 
     *  DataGrid that only allows editing if you double click
     * http://blogs.adobe.com/aharui/2008/03/datagrid_doubleclick_to_edit.html
     */
    public class DoubleClickDataGrid extends DataGrid
    {
     
        public function DoubleClickDataGrid()   {
            super();
            doubleClickEnabled = true;
        }
     
        override protected function mouseDoubleClickHandler(event:MouseEvent):void {
            var dataGridEvent:DataGridEvent;
            var r:IListItemRenderer;
            var dgColumn:DataGridColumn;
     
            r = mouseEventToItemRenderer(event);
            if (r && r != itemEditorInstance) {
                var dilr:IDropInListItemRenderer = IDropInListItemRenderer(r);
                if (columns[dilr.listData.columnIndex].editable)
                {
                    dgColumn = columns[dilr.listData.columnIndex];
                    dataGridEvent = new DataGridEvent(DataGridEvent.ITEM_EDIT_BEGINNING, false, true);
                    // ITEM_EDIT events are cancelable
                    dataGridEvent.columnIndex = dilr.listData.columnIndex;
                    dataGridEvent.dataField = dgColumn.dataField;
                    dataGridEvent.rowIndex = dilr.listData.rowIndex + verticalScrollPosition;
                    dataGridEvent.itemRenderer = r;
                    dispatchEvent(dataGridEvent);
                }
            }
            super.mouseDoubleClickHandler(event);
        }
     
        override protected function mouseUpHandler(event:MouseEvent):void {
            var r:IListItemRenderer;
            var dgColumn:DataGridColumn;
     
            r = mouseEventToItemRenderer(event);
            if (r) {
                var dilr:IDropInListItemRenderer = IDropInListItemRenderer(r);
                if (columns[dilr.listData.columnIndex].editable) {
                    dgColumn = columns[dilr.listData.columnIndex];
                    dgColumn.editable = false;
                }
            }
            super.mouseUpHandler(event);
     
            if (dgColumn)
                dgColumn.editable = true;
        }
    }
}


添付ファイル: fileflex_emp_spr_3.jpg 354件 [詳細] fileflex_emp_spr_2.jpg 367件 [詳細] fileflex_emp_spr_1.jpg 402件 [詳細]

リロード   新規 編集 凍結解除 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2012-08-08 (水) 23:26:00 (2923d)