JQuery MiniUI development tutorial table control table Editing: Cell editing (10)

Example: Cell editing

1. Create a cell Editor

<Div id = "datagrid1" class = "mini-datagrid" style = "width: 800px; height: 280px ;"
Url = "../data/AjaxService. aspx? Method = SearchEmployees "idField =" id"
AllowResize = "true" pageSize = "20"
AllowCellEdit = "true" allowCellSelect = "true" multiSelect = "true">
<Div property = "columns">
<Div type = "checkcolumn"> </div>
<Div field = "loginname" width = "120" headerAlign = "center" allowSort = "true"> employee account
<Input property = "editor" class = "mini-textbox" style = "width: 100%;"/>
</Div>
<Div field = "gender" width = "100" renderer = "onGenderRenderer" align = "center" headerAlign = "center"> gender
<Input property = "editor" class = "mini-combobox" style = "width: 100%;" data = "Genders"/>
</Div>
<Div field = "age" width = "100" allowSort = "true"> age
<Input property = "editor" class = "mini-spinner" minValue = "0" maxValue = "200" value = "25" style = "width: 100%;"/>
</Div>
<Div field = "birthday" width = "100" allowSort = "true" dateFormat = "yyyy-MM-dd"> Date of birth
<Input property = "editor" class = "mini-datepicker" style = "width: 100%;"/>
</Div>
<Div field = "remarks" width = "120" headerAlign = "center" allowSort = "true"> remarks
<Input property = "editor" class = "mini-textarea" style = "width: 100%;" minHeight = "80"/>
</Div>
<Div field = "createtime" width = "100" headerAlign = "center" dateFormat = "yyyy-MM-dd" allowSort = "true"> creation date </div>
</Div>
</Div>
After allowCellEdit and allowCellSelect are set, the table is in cell editing mode.

Ii. editing operations

Add row:

Function addRow (){
Var newRow = {name: "New Row "};
Grid. addRow (newRow, 0 );
}
Delete row:
Function removeRow (){
Var rows = grid. getSelecteds ();
If (rows. length> 0 ){
Grid. removeRows (rows, true );
}
}
Save data:
Function saveData (){
// Obtain a set of added, deleted, and modified records
Var data = grid. getChanges ();
Var json = mini. encode (data );
Grid. loading ("saving ......");
$. Ajax ({
Url: "../data/AjaxService. aspx? Method = SaveChangedEmployees ",
Data: {data: json },
Type: "post ",
Success: function (text ){
Grid. reload ();
},
Error: function (jqXHR, textStatus, errorThrown ){
Alert (jqXHR. responseText );
}
});
}

Iii. server processing

Public void SaveChangedEmployees ()
{
String json = Request ["data"];
ArrayList rows = (ArrayList) PluSoft. Utils. JSON. Decode (json );

Foreach (Hashtable row in rows)
{Www.2cto.com
// Add, delete, and modify records based on their statuses
String state = row ["_ state"]! = Null? Row ["_ state"]. ToString ():"";
If (state = "added ")
{
Row ["createtime"] = DateTime. Now;
New TestDB (). InsertEmployee (row );
}
Else if (state = "removed" | state = "deleted ")
{
String id = row ["id"]. ToString ();
New TestDB (). DeleteEmployee (id );
}
Else if (state = "modified ")
{
New TestDB (). UpdateEmployee (row );
}
}
}