JQuery MiniUI development tutorial CRUD: Form editing (3)

CRUD: In-row form editing

Reference example: CRUD: In-row form editing


I. Create an editing form

<Div id = "editForm1" style = "display: none; padding: 5px; position: relative;">
<Input class = "mini-hidden" name = "id"/>
<Table style = "width: 100%;">
<Tr>
<Td style = "width: 80px;"> employee account: </td>
<Td style = "width: 150px;"> <input name = "loginname" class = "mini-textbox"/> </td>
<Td style = "width: 80px;"> name: </td>
<Td style = "width: 150px;"> <input name = "name" class = "mini-textbox"/> </td>
<Td style = "width: 80px;"> salary: </td>
<Td style = "width: 150px;"> <input name = "salary" class = "mini-textbox"/> </td>
</Tr>
<Tr>
<Td> Gender: </td>
<Td> <input name = "gender" class = "mini-combobox" data = "Genders"/> </td>
<Td> Age: </td>
<Td> <input name = "age" class = "mini-spinner" minValue = "0" maxValue = "200" value = "25"/> </td>
<Td> Date of Birth: </td>
<Td> <input name = "birthday" class = "mini-datepicker"/> </td>
</Tr>
<Tr>
<Td style = "text-align: right; padding-top: 5px; padding-right: 20px;" colspan = "6">
<A class = "Update_Button" href = "javascript: updateRow ();"> Update </a>
<A class = "Cancel_Button" href = "javascript: cancelRow ();"> Cancel </a>
</Td>
</Tr>
</Table>
</Div>

Ii. Embed detailed rows

// Display row details
Grid. hideAllRowDetail ();
Grid. showRowDetail (row );
// Add the editForm element to the row detail cell.
Var td = grid. getRowDetailCellEl (row );
Td. appendChild (editForm );
EditForm. style. display = "";

3. Load the form

Var form = new mini. Form ("editForm1 ");
If (grid. isNewRow (row )){
Form. reset ();
} Else {
Form. loading ();
$. Ajax ({
Url: "../data/DataService. aspx? Method = GetEmployee & id = "+ row. id,
Success: function (text ){
Var o = mini. decode (text );
Form. setData (o); form. unmask ();
}
});
}

4. submit a form

Var form = new mini. Form ("editForm1 ");
Var o = form. getData (); grid. loading ("saving, please wait ......");
Var json = mini. encode ([o]);
$. Ajax ({
Url: "../data/DataService. aspx? Method = SaveEmployees ",
Data: {employees: json },
Success: function (text ){
Grid. reload ();
},
Error: function (jqXHR, textStatus, errorThrown ){
Alert (jqXHR. responseText );
}
});