JQuery MiniUI Quick Start: CRUD (III)

As follows:

I. Create a DataGrid

First, create a data table:

<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>
Ii. query records

Function search (){
Var key = document. getElementById ("key"). value;
Grid. load ({key: key });
}
Using the load method, you can pass more and any complex query conditions. The backend obtains and processes the data using the Request ["key"] method.

3. New Records

Function addRow (){
Var newRow = {name: "New Row "};
Grid. addRow (newRow, 0 );
}
When creating a new record, you can initialize attributes, such as newRow. age = 20;

Iv. delete records

Function removeRow (){
Var rows = grid. getSelecteds ();
If (rows. length> 0 ){
Grid. removeRows (rows, true );
}
}
You can delete multiple records at a time.

5. edit records

You can click a cell to edit it.

The editor is specified when defining columns, for example:

<Div field = "loginname" width = "120" headerAlign = "center" allowSort = "true"> employee account
<Input property = "editor" class = "mini-textbox" style = "width: 100%;"/>
</Div>
The property declaration here. This textbox serves as the editor object of the column.

5. Submit and save

After multiple add, delete, and modify operations, submit and save the operation to the background at one time.

Function saveData (){
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 );
}
});
}
The getChanges method of the DataGrid to directly obtain the added, deleted, and modified record data. The data status bit "_ state" is "added"/"removed"/"modified ".

6. Query Processing (server)

When grid calls the load method, it sends the query conditions to the server. After the server uses the Request object to obtain the query conditions, it calls the business layer method and returns the results. The Code is as follows:

Public void SearchEmployees ()
{
// Query Conditions
String key = Request ["key"];
// Pagination
Int pageIndex = Convert. ToInt32 (Request ["pageIndex"]);
Int pageSize = Convert. ToInt32 (Request ["pageSize"]);
// Sort Fields
String sortField = Request ["sortField"];
String sortOrder = Request ["sortOrder"];
// Business layer: Database Operations
Hashtable result = new TestDB (). SearchEmployees (key, pageIndex, pageSize, sortField, sortOrder );
// JSON
String json = PluSoft. Utils. JSON. Encode (result );
Response. Write (json );
}
After query, get the data, serialize the data into a JSON string, and then return it with Response.

6. Storage processing (server)

After obtaining the data, traverse the record and add, delete, and modify the records based on their status bit "_ state. The Code is as follows:

Public void SaveChangedEmployees ()
{
String json = Request ["data"];
ArrayList rows = (ArrayList) PluSoft. Utils. JSON. Decode (json );
Foreach (Hashtable row in rows)
{
// 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 );
}
}
}
Example:

CRUD
CRUD: Cell Editor
CRUD: Edit form
CRUD: pop-up panel