CYQ. Data quick development EasyUI

EasyUI:

One of the front-end UI frameworks is relatively small compared to ExtJs. In the past two days, I took the time to read EasyUI related knowledge. I can basically share it with you:

Official Website: http://www.jeasyui.com/

There are basically three ways to learn:

One is the Demo. You can view all provided Controls and then choose which one to use.

One is Document. If a control requires JavaScript code control, you may need to check the attributes, events, and methods provided by related APIs.

One is to search for related articles and look at some examples or tutorial articles on the Internet.

Since EasyUI is based on JQ syntax, it is best to have a jq api manual.

EasyUI:

For example, it takes me a lot of time to add, delete, modify, query, and pagination ):

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/195404FA-0.jpg "style =" line-height: 1.5; "/>

For basic usage, refer to the Demo on the official website. Here are some of my problems:

1: Paging and data loading problems:

At first, because you do not know the default Json format required by the table, you can only dynamically bind data. The general code is as follows:

$. GetJSON ("json. ashx", function (result) {$ ("# dg"). datagrid ("loadData", result. data );}

Then, you need to assign the total number of records to the paging control:

$. GetJSON ("json. ashx ", function (result) {$ (" # dg "). datagrid ("loadData", result. data); $ ("# db "). datagrid ("gerPager "). pagination ({"total": result. count });}

After a long time, I found the Json format. As long as the output Json format is based on its requirements, I only need to specify the url, and the paging control will be automatically bound, the output format is:

{"Total": "42", "errorMsg": "", "success": "true", "rows": [{"ID": "1 ", "UserName": "22222", "CreateTime": "2012/9/27 17:13:52" },{ "ID": "2", "UserName": "2", "CreateTime ": "17:12:05" },{ "ID": "3", "UserName": "1", "CreateTime": "18:18:22" },{ "ID ": "7", "UserName": "ttttttttttt", "CreateTime": "2012/9/27 17:15:33" },{ "ID": "8", "UserName": "ttttttt ", "CreateTime": "" },{ "ID": "9", "UserName": "999", "CreateTime": "" },{ "ID ": "10", "UserName": "2222", "CreateTime": "" },{ "ID": "11", "UserName": "333 ", "CreateTime": "" },{ "ID": "12", "UserName": "44", "CreateTime": "" },{ "ID ": "13", "UserName": "55", "CreateTime": ""}]}

The total and rows arrays are the standard field names, just like CYQ. the output code of the Data background table is count and data, with different names. To facilitate easyui support, you have to change the output name to the same one.

2: repeated request sending:

When you specify the request url using the following code, the request is sent twice:

$ (Function (){
$ ("# Dg"). datagrid ({
"Url": "Json. ashx ",
"Pagination": true
});
});

Later, we found that we could just remove the class in html.

<Table id = "dg" title = "My Users" class = "easyui-datagrid"
Changed:
<Table id = "dg" title = "My Users"

Quick development of EasyUI using CYQ. Data:

To make it easier to work with EasyUI, I adjusted the JsonHelper class of CYQ. Data framework a little bit to make development better.

1: Data Loading and paging:

The front-end adopts the EasyUI Demo, while the back-end code can be written as a pass-through Code as follows:

Publicstring OutJson (string tName, int pageIndex, int pageSize, stringwhere)
{
String json = string. Empty;
Using (MAction action = new MAction (tName ))
{
Json = action. Select (pageIndex, pageSize, where). ToJson (); // The output format directly caters to easyUI
}
Return json;
}

A URL is returned directly by specifying the table name and condition based on the parameter.

2: Add and update the killer code:

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/19540442Y-1.jpg "style =" line-height: 1.5; "/>

Publicstring UpdateOrInsert (string tName, int id) // easyUI will automatically Post data by default. The value is automatically set here.
{
Bool result = false;
Using (MAction action = new MAction (tName ))
{
If (id> 0)
{
Result = action. Insert (true );
}
Else
{
Result = action. Update (id, true );
}
}
Return JsonHelper. OutResult (result, result? "": "Operation failed! "); // The new method, in combination with the Save prompt required by easyUI.
} 3: delete the killer code:

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/195404D26-2.jpg "style =" line-height: 1.5; "/>

Publicstring Delete (string tName, int id)
{
Bool result = false;
Using (MAction action = new MAction (tName ))
{
Result = action. Delete (id );
}
Return JsonHelper. OutResult (result, result? "": "Operation failed! ");
}

The basic background is a small adjustment, and the basic CRUD development is quite simple.

Summary:

1: EasyUI is a good front-end framework. Although commercial use requires payment, it is a small cost for the company, and most small companies do not plan to pay for it.

2: After minor adjustments, CYQ. Data can easily support EasyUI development.

3: If you are using the open-source version V4.55, if you need to support EasyUI and JsonHelper class output, change Count to Total and change data to rows.