JQueryEasyUI の基本的な使用法 datagrid Framework_jquery-jsチュートリアル-php.cn

JQueryEasyUI の基本的な使用法 datagrid Framework_jquery

May 16, 2016 pm 05:38 PM

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

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

<link href ="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" />
 <!--easyui の最も完全なスタイル パッケージは個別に使用することもできます。使用したいスタイル パッケージを参照してください -->
<link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
<!--easyui には画像スタイル パッケージが付属していますが、自分で追加することもできます-->
<script src=" jquery-easyui-1.3.2/jquery-1.8.0.min.js" type ="text/javascript"></script>
<!--私は easyui 1.3.2 を使用しています。 jquery-1.8.0-->
<script src="jquery -easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
<!--easyui の js パッケージ-->
< スクリプト src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"> ;/script>
<!--easyui の中国語言語パック、デフォルトは英語です-->
</head>
<body id="layoutbody" class="easyui-layout ">
<div data-options="region:'north ',title:'North Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
</div>
< div data-options="region:'east',iconCls:'icon-reload ',title:'East',split:true" style="width: 100px;">
</div>
<div data-options="region:'west',title:' West',split:true" style="width: 100px;">
</div>
<div データ-options="region:'center',title:'center title'" href ="HTMLPage.htm" style="padding: 5px;
background: #eee; overflow: hidden;"><!- -これは HTML ページを指します-->
</div> ;
</body>
</html>

HTMLPage.htm コード:

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

<script type="text/javascript" charst="utf-8">
//レイアウトフレームがhrefを指している場合、HTMLページ本体の中央部分のみが取得されるため、ページは次のようになります。 
 // 一部のデータグリッドには多くの属性が含まれているため、js を使用してデータグリッド フレームワーク 
$(function () {
$("#dg") を初期化してみてください。 datagrid({
 url: "GetJson.ashx", //汎用ハンドラーまたはコントローラーを指します。返されるデータは Json 形式である必要があります。Json 形式のデータを直接割り当てることもできます。Json を取得しますデモに付属しているデータは例として書きません。バックグラウンドのコードですが、バックグラウンドで返される注意事項について説明します。
title: "データ表示テーブル"、
iconCls: "icon-add ", 
fitColumns: false, // true に設定すると、水平スクロールを防ぐために列がテーブルの幅に自動的に適合します。 false の場合、サイズが自動的に一致します。 
//toolbar ツールバーを次の位置に設定します。配列形式のテーブルの先頭 
idField: 'id', //列を識別します。通常は id に設定されます。大文字と小文字が区別される場合があります。注意してください。 
loadMsg: "データのロードに懸命に取り組んでいますfor you", //データのロード時にユーザーに表示されるステートメント
pagination: true, //下部のページング ツールを表示します。Column
rownumbers: true, //行番号 1、2、3、4 を表示します。 ..
pageSize: 10, //ページング項目の数、つまりデータをバックグラウンドに読み取るときに渡される値を読み取ります
pageList: [10, 20, 30], //データは調整できます各ページに表示されます。つまり、バックグラウンドからデータを要求するたびに pageSize データを調整します
//データグリッドには属性が多すぎるため、毎回変更しません必要に応じてすべてが導入されていることがわかりますAPI
sortName: "name", //テーブルの初期化時に基づく並べ替えフィールドはデータベースのフィールド名と同じである必要があります
sortOrder: "asc", //通常のシーケンス
列: [[
{ フィールド: 'コード', タイトル: 'コード', 幅: 100 },
{ フィールド: '名前', タイトル: '名前', 幅: 100 ,sortable:true},/ /sortable:true 列をクリックすると昇順、降順を変更できます
{ field: 'addr', title: 'addr', width: 100,
//こんな感じで追加できますここで表示データを変更するメソッド
// formatter: function (value, row,index) {
// if (value == "0") {
// return "通常の役割"; 🎜>// } else {
// return "特別な役割";
// }
// }
}
]]//ここに角括弧が 2 つある理由詳細については、デモ
});
});
</script>
<div id="tt" class= を参照してください。 "easyui-tabs" style="width: 500px; height: 250px;" fit="true"
border="false">
<div title="Tab1" style="padding: 20px; " border= "false">
<table id="dg">
</table>
</div>
</div>

これは、フロントエンドがデータを要求したときに送信されるデータです。

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<UserInfo>((pageIndex-1)*pageSize)
.Take<UserInfo>(pageSize) )
.ToList<UserInfo>();
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);
}