Basic use of JQueryEasyUI datagrid framework_jquery

Today I will talk about the basic use of this datagrid framework. This framework has always been a headache for everyone, especially the splicing of Json data. The backend and frontend are both important. When using this framework, the most important thing is to be careful:
No need to talk nonsense, here’s the code:

Copy the code The code is as follows:

< script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript">

HTMLPage.htm code:

Copy code The code is as follows:

border="false">

This is the data sent when the frontend requests data;

Json format data must be in double quotes, single quotes cannot display data;

The data format is as follows:

Copy code The code is as follows:

{
" total":239,
"rows":[
{"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data "},
{"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},
{"code" :"003","name":"Name 3","addr":"Address 87","col4":"col4 data"},
{"code":"004","name":" Name 4","addr":"Address 63","col4":"col4 data"},
{"code":"005","name":"Name 5","addr":"Address 45","col4":"col4 data"},
{"code":"006","name":"Name 6","addr":"Address 16","col4":"col4 data "},
{"code":"007","name":"Name 7","addr":"Address 27","col4":"col4 data"},
{"code" :"008","name":"Name 8","addr":"Address 81","col4":"col4 data"},
{"code":"009","name":" Name 9","addr":"Address 69","col4":"col4 data"},
{"code":"010","name":"Name 10","addr":"Address 78","col4":"col4 data"}
]
}

Here, it is important to transfer data in the background:

Note: In the request returned from the form Post or get,
page: 3 means page is the key, and the current page number selected is 3.
rows: 10 means the size of the page is 10.
Returned by the background The format of the data is: {total: '', rows: [{},{}]}
As long as the total tatol field is included, rows is the specific number of rows
For example:
Asp.Net MVC example :
public JsonResult GetAllUserInfos()
{
int pageSize = 5;
int pageIndex = 1;
int.TryParse(this.Request["page"], out pageIndex);
int.TryParse(this.Request["rows"], out pageSize);

pageSize = pageSize <= 0 ? 5 : pageSize;
pageIndex = pageIndex < 1 ? 1 : pageIndex;

var temp = db.UserInfo
.OrderBy(u=>u.Sort)
.Skip((pageIndex-1)*pageSize)
.Take(pageSize )
.ToList();
Hashtable ht = new Hashtable();
ht["total"] = db.UserInfo.Count();
ht["rows"] = temp;
return Json(ht);
}

Asp.Net WebForm Example:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var strWebName = context.Request["WebName"] ?? string.Empty;
var GoodsNo = context.Request["GoodsNo"] ?? string.Empty;
int categoryId = 0;

int pageIndex = 1;
int pageSize = 10;

int.TryParse(context.Request["rows"], out pageSize);
int.TryParse(context.Request["page"], out pageIndex);

decimal priceLeft = 0;
decimal priceRight = 1000000;
int goodsStatus = 0;
decimal.TryParse(context.Request["PriceLeft"], out priceLeft);
decimal.TryParse (context.Request["PriceRight"], out priceRight);
int.TryParse(context.Request["CategoryId"], out categoryId);
int.TryParse(context.Request["GoodsStatus"], out goodsStatus);
var goodsQueryParamter = new GoodsQueryParamter();


goodsQueryParamter.GoodsStatus = (Model.GoodsModel.GoodsStatusEnum)goodsStatus;

var ds = goodsService.GetGoodsList(goodsQueryParamter);
string json = string.Empty;

if (ds != null && ds.Tables.Count > 0)
{
System.Text.StringBuilder rowJson = new System.Text.StringBuilder();
int colLen = ds. Tables[0].Columns.Count;
DataColumnCollection col = ds.Tables[0].Columns;
foreach (DataRow row in ds.Tables[0].Rows)
{
System. Text.StringBuilder colJson = new System.Text.StringBuilder();
rowJson.Append("{");
for (int i = 0; i < colLen; i )
{
colJson.Append(""" col[i].ColumnName "":"" row[i].ToString() "",");
}
rowJson.Append(colJson.ToString().TrimEnd (','));
rowJson.Append("},");
}
json = "{"total":" ds.Tables[0].Rows[0]["sumGoods "] ","rows":[" rowJson.ToString().TrimEnd(',') "]}";
}
context.Response.Write(json);
}

There is a class in ASP.Net that can also serialize Json format data;

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn