JQueryEasyUI DataGrid Framework_jquery의 기본 사용

오늘은 이 DataGrid 프레임워크의 기본 사용에 대해 이야기하겠습니다. 이 프레임워크는 항상 모든 사람의 골칫거리였습니다. 특히 Json 데이터의 접합은 이 프레임워크를 사용할 때 가장 중요합니다. 조심하라는 것입니다:
쓸데없는 말을 할 필요가 없습니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. :

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

< div data-options="region:'east',iconCls:'icon-reload ',title:'East',split:true" style="width: 100px;">

HTMLPage.htm 코드:

코드 복사 코드는 다음과 같습니다.

border="false">

프런트엔드에서 데이터를 요청할 때 보내는 데이터입니다.

Json 형식 데이터는 큰따옴표로 묶어야 하며 작은따옴표는 데이터를 표시할 수 없습니다.

데이터 형식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

{
" 총계":239,
"행":[
{"code":"001","name":"이름 1","addr":"주소 11"," col4":"col4 데이터 "},
{"code":"002","name":"이름 2","addr":"주소 13","col4":"col4 data"},
{"code":"003","name":"이름 3","addr":"주소 87","col4":"col4 data"},
{"code":"004" ,"name":" 이름 4","addr":"주소 63","col4":"col4 데이터"},
{"code":"005","name":"이름 5", "addr":"주소 45","col4":"col4 데이터"},
{"code":"006","name":"이름 6","addr":"주소 16"," col4":"col4 데이터 "},
{"code":"007","name":"이름 7","addr":"주소 27","col4":"col4 data"},
{"code":"008","name":"이름 8","addr":"주소 81","col4":"col4 data"},
{"code":"009" ,"name":" 이름 9","addr":"주소 69","col4":"col4 데이터"},
{"code":"010","name":"이름 10", "addr":"주소 78","col4":"col4 데이터"}
]
}


여기서는 백그라운드에서 데이터를 전송하는 것이 중요합니다.

참고: Post 또는 get 형식에서 반환된 요청에서
page: 3은 페이지가 키이고 현재 선택된 페이지 번호가 3임을 의미합니다.
rows: 10은 페이지 크기가 3임을 의미합니다. 10.
백그라운드에서 반환됨 데이터 형식은 다음과 같습니다: {total: '', 행: [{},{}]}
총 tatol 필드가 포함되는 한 행은 특정 숫자입니다. 행 수
예:
Asp.Net MVC 예:
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 pageIndex = 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 예:
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 카테고리Id = 0;

int pageIndex = 1;
int pageSize = 10;

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

십진수 가격 왼쪽 = 0;
십진수 가격Right = 1000000;
int productsStatus = 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 productsStatus);
var productsQueryParamter = 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(ds.Tables[0].Rows의 DataRow 행)
{
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);
}

ASP.Net에는 Json 형식 데이터를 직렬화할 수도 있는 클래스가 있습니다.