JQuery MiniUI development tutorial table control table Editing: Dialog Box editing (13th)

Reference example: CRUD: pop-up panel editing

I. Create a pop-up editing panel

<Div id = "editWindow" class = "mini-window" title = "Window" style = "width: pixel ;"
ShowModal = "true" allowResize = "true" allowDrag = "true"
>
<Div id = "editform" class = "form">
<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" url = "mini_JSPath + '.. /.. /demo/data/genders.txt '"/> </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>
</Div>

2. Panel operations

Pop-up loading panel data:

Var editWindow = mini. get ("editWindow ");
EditWindow. show ();
Var form = new mini. Form ("# editform ");
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 ();
},
Error: function (){
Alert ("form loading error ");
}
});
Save submit panel data:
Var form = new mini. Form ("# editform ");
Var o = form. getData ();

Grid. loading ("saving ......");
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 );
}
});

EditWindow. hide ();