JQuery MiniUI development tutorial table control table Editing: Row Editor (11)

Example: CRUD: Row editing

1. Create a cell Editor

<Div id = "datagrid1" class = "mini-datagrid" style = "width: 700px; height: 280px ;"
Url = "../data/DataService. aspx? Method = SearchEmployees"
>
<Div property = "columns">
<Div name = "action" width = "120" headerAlign = "center" align = "center" renderer = "onActionRenderer" cellStyle = "padding: 0; ">#</div>
<Div field = "loginname" width = "120" headerAlign = "center" allowSort = "true"> employee account
<Input property = "editor" class = "mini-textbox"/>
</Div>
<Div field = "gender" width = "100" allowSort = "true" renderer = "onGenderRenderer" align = "center" headerAlign = "center"> gender
<Input property = "editor" class = "mini-combobox" style = "width: 100%;" data = "[{id: 1, text: 'male '}, {id: 2, text: 'female}] "/>
</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 = "createtime" width = "100" headerAlign = "center" dateFormat = "yyyy-MM-dd" allowSort = "true"> creation date </div>
</Div>
</Div>
For example, the property of mini-textbox is "editor", which indicates the editor of this column.

 

Ii. editing operations

Start to edit the row:
Grid. beginEditRow (row );
Cancel Editing:
Grid. cancelEdit ();
Submit and edit data:

Var rowData = grid. getEditRowData (row );
Grid. loading ("saving ......");
Var json = mini. encode ([rowData]);
$. Ajax ({
Url: "../data/DataService. aspx? Method = SaveEmployees ",
Data: {employees: json },
Success: function (text ){
Grid. reload ();
}, Www.2cto.com
Error: function (jqXHR, textStatus, errorThrown ){
Alert (jqXHR. responseText );
}
});