JQueryMiniUI development tutorial table control table Editing: Cell editing (10)

Example: Cell editing 1: Create a cell Editor & lt; divid & quot; datagrid1 & quot; class & quot; mini-datagrid & quot; style & quot; width: 800px; height: 280px; & quot; url & quot ;.. /data/AjaxService. aspx? Meth

Example: Cell editing

1. Create a cell Editor

Url = "../data/AjaxService. aspx? Method = SearchEmployees "idField =" id"
AllowResize = "true" pageSize = "20"
AllowCellEdit = "true" allowCellSelect = "true" multiSelect = "true">


Employee account


Gender


Age


Date of birth


Remarks


Creation date


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 );
}
}
}