The flex4 DataGrid is modified according to the specified column and synchronized to the database.

Sometimes we want to modify only a row of values in a column of the DataGrid, and asynchronously update the data to the database. In this process, the page is not refreshed.

Next, we can set the DataGrid attribute. First, we can set which columns can be edited and which cannot be edited.

You can configure the oneditbeginning event as follows:

Private function oneditbeginning (Event: datagridevent): void {var datafield: String = event. datafield; var relationship: String = dg_list.selecteditem.relationship; var country: String = dg_list.selecteditem.country; // we only want to allow editing of friends. if it's any other relationship, stop right now. // check if this is a column we want to allow editing // Ya, you cocould DO <mx: datagridcolumn editable = "Fa LSE "Etc.../> // but this gives you an idea if you needed to do it conditionally based on the situation. If (datafield! = 'Type') {// alert. Show ('Sorry, you can only edit the date type. '); event. preventdefault ();}}

In this case, only columns of the type have the modification permission, and other columns cannot be edited.

After editing, we want to synchronize the data to the database. The oneditend event is used as follows:

Public Function oneditend (Event: datagridevent): void {/***** modify operation * http: // 192.168.17.66: 8080/smarter/calendarsetting! Setdatetype? Datetoset = 2011-11-07 & typetoset = 2 **/var Cols: datagridcolumn = dg_list.columns [event. columnindex]; // obtain the date var SelectDate: String = event. itemrenderer. data. date; If (SelectDate! = NULL) trace ("before: \ t" + SelectDate); If (cols. editordatafield! = NULL) {// The New Value var selectdatetype: String = dg_list.itemeditorinstance [cols. editordatafield]. tostring (); // var newvalue: String = textinputvalue. text; If (selectdatetype! = NULL) trace ("affter: \ t" + selectdatetype); If (selectdatetype = "workday") {mark = 1 ;} else if (selectdatetype = "" ") {mark = 2;} else if (selectdatetype =" ") {mark = 3 ;}} // update using httpservice: var changedatatypeservice: httpservice = new httpservice (); changedatatypeservice. method = "Post"; // the POST method is more secure. changedatatypeservice. addeventlistener (resultevent. result, changedatatyperesultfunc); changedatatypeservice. addeventliste NER (faultevent. Fault, changedatatypefaultfunc); // The value of changedatatypeservice. url = "http: // 192.168.17.66: 8080/smarter/calendarsetting! Setdatetype? Datetoset = "+ SelectDate +" & typetoset = "+ mark; changedatatypeservice. resultformat = "E4X"; // data transmission mode: changedatatypeservice. useproxy = false; changedatatypeservice. send (); // send it out // displayflagtxt. TEXT = "the data of the selected cells can be formatted as" items (event.tar get as datagrid).selecteditemdetail (event.tar get as DataGrid ). columns [event. columnindex]. datafield] + "\ n";} // two response functions: Public Function changedatatyperesultfunc (Event: resultevent): void {var resultmark: String = new string (event. result); var flag: Number = new number (resultmark); If (flag = 1) {alert. show ("modified successfully, updated to Database") ;}} public function changedatatypefaultfunc (Event: faultevent): void {var faultmark: String = new string (event. fault); var flag: Number = new number (faultmark); If (flag =-1) {alert. show ("modification failed because the date format is incorrect. Please try again !!!! ");} Else if (flag = 0) {alert. Show (" modification failed, background server exception! ");}}

In this way, you can modify by specified column and synchronize the data to the database.

Finally, declare it in the DataGrid label as follows:

<Mx: vbox width = "579" Height = "486" horizontalalign = "center" verticalalign = "Middle"> <mx: dataGrid id = "dg_list" x = "11" Y = "-1" width = "557" Height = "429" Click = "dg_list_clickhandler (Event) "dataprovider =" {acpagedata} "editable =" true "itemeditbeginning =" oneditbeginning (event) "itemeditend =" oneditend (event) "rowcount =" {pagesize} "> <mx: columns> <mx: datagridcolumn datafield = "ID" headertext = "date row number" labelfunction = "lfrownum"/> <mx: datagridcolumn datafield = "date" headertext = "specific date"/> <mx: datagridcolumn datafield = "type" headertext = "date type"> <mx: itemeditor> <FX: component> <mx: ComboBox width = "130" change = "combobox2_changehandler (event)" dataprovider = "{outerdocument. daytypearr} "labelfield =" label "selectedindex =" {data. flag} "> </MX: ComboBox> </FX: component> </MX: itemeditor> </MX: datagridcolumn> </MX: columns> </MX: DataGrid>

The display effect is shown in the previous example, which is omitted here.

(To be continued)