JQueryEasyUI の基本的な使用法 datagrid Framework_jquery

今日は、このデータグリッド フレームワークの基本的な使用方法について説明します。特に、このフレームワークを使用する際に最も重要なのは、Json データのスプライシングです。注意してください:
ナンセンスを話す必要はありません。コードは次のとおりです:

コードをコピーします コードは次のとおりです:

< スクリプト 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 形式のデータは二重引用符で囲む必要があります。一重引用符でデータを表示することはできません。

データ形式は次のとおりです:

コードをコピーします コードは次のとおりです:

{
" total":239,
"rows":[
{"code":"001","name":"名前 1","addr":"アドレス 11"," col4":"col4 データ "},
{"code":"002","name":"名前 2","addr":"アドレス 13","col4":"col4 データ"},
{"code" :"003","name":"名前 3","addr":"アドレス 87","col4":"col4 データ"},
{"コード":"004" ,"name":"名前 4","addr":"アドレス 63","col4":"col4 データ"},
{"コード":"005","name":"名前 5", "addr":"アドレス 45","col4":"col4 データ"},
{"コード":"006","name":"名前 6","addr":"アドレス 16"," Col4":"col4 データ "},
{"code":"007","name":"名前 7","addr":"アドレス 27","col4":"col4 データ"},
{"code" :"008","name":"名前 8","addr":"アドレス 81","col4":"col4 データ"},
{"コード":"009" ,"name":"名前 9","addr":"アドレス 69","col4":"col4 データ"},
{"コード":"010","name":"名前 10", "addr":"アドレス 78","col4":"col4 データ"}
]
}


ここでは、バックグラウンドでデータを転送することが重要です:

注: Post または get フォームから返されたリクエストでは、
page: 3 はページがキーであり、選択されている現在のページ番号が 3 であることを意味します。
rows: 10 はページのサイズを意味します。 10.
バックグラウンドによって返されるデータの形式は次のとおりです: {total: '', rows: [{},{}]}
total tatol フィールドが含まれる限り、rows は特定の数です行数
例:
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 categoryId = 0;

int pageIndex = 1;
int pageSize = 10;

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

10 進数の PriceLeft = 0;
10 進数の PriceRight = 1000000;
int GoodsStatus = 0;
10 進数.TryParse(context.Request["PriceLeft"], out PriceLeft);
10 進数.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;
DataColumnCollectioncol = 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 {
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 形式のデータをシリアル化できるクラスもあります。