[ASP.NET] 於ASP.NET使用 jQuery EasyUi DataGrid 存取資料

因为是转载文章 在此标明出处，以前有文章是转的没标明的请谅解，因为有些已经无法找到出处，或者与其它原因。

如有冒犯请联系本人，或删除，或标明出处。

因为好的文章，以前只想收藏，但连接有时候会失效，所以现在碰到好的直接转到自己这里。

原文 出处http://www.dotblogs.com.tw/joysdw12/archive/2012/03/21/70917.aspx

　最近逛了逛 jQuery 資料又發現了一個新的 UI 可以使用，就是 jQuery EasyUI，沒注意到是甚麼時候出現的，之前印象只有jquery ui跟jquery tools，看了一下他的文件內容跟Demo資料，其實也提供蠻多好用的plugin，其中覺得他的datagrid感覺還不錯，順手寫了一個範例記錄一下。

jQuery EasyUi 網址: http://www.jeasyui.com

jQuery EasyUi 中文文件: http://www.phptogether.com/juidoc/

 

範例

---

Step 1

　　首先要去 jQuery EasyUi 網站下載檔案，最新版本為 jQuery EasyUI 1.2.5 

 

Step 2

　　建立新網站，加入jquery及easyui套件

 

Step 3

　　建立一頁新aspx網頁及ashx泛型處理常式用來處理ajax需求，將js檔案載入aspx頁面，依序是css, jquery.js, easyui.js

• jquery.easyui.min.js為包含所有plugin，當然也可以單獨載入要使用的plugin檔案，
• 如果需要使用繁體語系，可以在所有.js檔最後面載入 locale 資料夾內的 easyui-lang-zh_TW.js 檔案。
• 因官網下載的datagrid有如果在page中將datagrid放在form標籤中，選擇跳頁會post的問題，所以這邊需要重新載入原作者提供給我的修正檔pagination plugin。

 

Step 4

　　依照官網範例其實就可以很簡單的建立起基本雛型，這邊也一樣實際做一下，針對DataGrid easyui是使用<table>標籤，所以在body內加入一個table並且設定一下表頭欄位，表頭欄位也可以在 script 內的 columns properties設定 ，dgl 的 div 是為了使用 Dialog 來做新增資料的介面。

 

Step 5 

　　接下來就開始撰寫 Java Script 碼，基本用法如下:

1	$('#grid').datagrid({

2	url:'CRUDHandler.ashx',  //處理資料面程式

3	columns:[[   //設定欄位

4	{field:'id',title:'ID',width:100},

5	{field:'name',title:'Name',width:100},

6	{field:'age',title:'Age',width:100,align:'right'},

7	{field:'address',title:'Address',width:100}

8

]]

9

});

　　這使用尚有很多種屬性可以設定，這些屬性在官方文檔內都可以找的到，在這邊我輸入的Script如下:

01	$(function () {

02	var qParams = { id: $("#txtid").val(), name: $("#txtname").val() }; //取得查詢參數

03	var oldRowIndex;

04	var opt = $('#grid');

05	opt.datagrid({

06	width: "auto", //自動寬度

07	height: 320,  //固定高度

08	nowrap: false, //不截斷內文

09	striped: true,  //列背景切換

10	fitColumns: true,  //自動適應欄寬

11	singleSelect: true,  //單選列

12	queryParams: qParams,  //參數

13	url: 'CRUDHandler.ashx',  //資料處理頁

14	idField: 'id',  //主索引

15	frozenColumns: [[{ field: 'ck', checkbox: true}]], //顯示核取方塊

16	pageList: [10, 15, 20], //每頁顯示筆數清單

17	pagination: true, //是否啟用分頁

18	rownumbers: true, //是否顯示列數

19	toolbar: [{

20	id: 'btnAdd',

21	text: '新增',

22	iconCls: 'icon-add',

23	handler: function () {

24	insertRow($(this));

25

}

26

}],

27	onClickRow: function (rowIndex) {

28	if (oldRowIndex == rowIndex) {

29	opt.datagrid('clearSelections', oldRowIndex);

30

}

31	var selectRow = opt.datagrid('getSelected');

32	oldRowIndex = opt.datagrid('getRowIndex', selectRow);

33

}

34	}).datagrid("getPager").pagination({

35	buttons: [{

36	id: 'btnEdit',

37	iconCls: 'icon-edit',

38	text: '編輯',

39	handler: function () {

40	editRow();

41

}

42

}, '-', {

43	id: 'btnDel',

44	text: '刪除',

45	iconCls: 'icon-remove',

46	handler: function () {

47	removeRow();

48

}

49

}],

50	onBeforeRefresh: function () {

51	return true;

52

}

53

});

54	$("#btnQry").click(function(){

55

Query();

56

});

57

});

 

　　以上這段為主體的Script，這個DataGrid可以處理 查詢、新增、更新、刪除，傳輸資料的格式主要為JSON，接下來必須將對應的方法都補上，開啟新增畫面方法:

1

//開啟新增並位移

2	function insertRow(opt) {

3	var offset = opt.offset();

4	$('#dlg').dialog('open').dialog('setTitle', '新增資料').dialog('move', {

5	left: offset.left,

6	top: offset.top

7

});

8

}

 

　　儲存資料方法:

01

//儲存資料

02	function saveData() {

03	if ($(".easyui-validatebox").val() != "") {

04	$.post('CRUDHandler.ashx', 'mode=INS&' + $('#frmAjax input').serialize(), function (result) {

05	if (result.success) {

06	$('#dlg').dialog('close');

07	$.messager.alert('Success', '新增成功！', 'info', function () {

08	$('#grid').datagrid('reload'); // reload

09

});

10

} else {

11	$.messager.alert('Error', result.msg, 'warning');   //錯誤訊息

12

}

13	}, 'json');

14

}

15

else

16	$.messager.alert('警告', '未輸入ID！', 'warning');   //錯誤訊息

17

}

 

　　編輯資料列方法(這邊使用直接跳頁至Detail頁面處理:

1

//編輯資料列

2	function editRow() {

3	var row = $("#grid").datagrid('getSelected');

4	if (row != null)

5	window.location.href = "Detail.aspx?mode=UPD&pk=" + row.id;

6

else

7	$.messager.alert('訊息', '尚未選擇需編輯的資料列！', 'info');   //

8

}

 

　　刪除資料列方法:

01

//刪除資料列

02	function removeRow() {

03	var row = $("#grid").datagrid('getSelected');

04	if (row) {

05	$.messager.confirm('Confirm', '確定要刪除此筆資料?', function (r) {

06

if (r) {

07	var index = $("#grid").datagrid('getRowIndex', row);

08	//$('#grid').datagrid('deleteRow', index); //取得index

09	$.post('CRUDHandler.ashx', { 'mode': 'DEL', id: row.id }, function (result) {

10	if (result.success) {

11	$.messager.alert('Success', '刪除成功！', 'info', function () {

12	$('#grid').datagrid('reload');  //刷新畫面

13

});

14

} else {

15	$.messager.alert('Error', result.msg, 'warning');   //錯誤訊息

16

}

17	}, 'json');

18

}

19

});

20

21

}

22

else

23	$.messager.alert('訊息', '尚未選擇需刪除的資料列！', 'info');   //

24

}

 

　　查詢方法:

01	function Query() {

02	var qid, qname;

03	if ($("#txtid").val() != "")

04	qid = $("#txtid").val();

05

else

06

qid = "";

07	if ($("#txtname").val() != "")

08	qname = $("#txtname").val();

09

else

10	qname = "";

11

12	qParams = { id: qid, name: qname };

13	$('#grid').datagrid('options').queryParams = qParams;

14	$('#grid').datagrid('options').pageNumber = 1;

15	var p = $('#grid').datagrid('getPager');

16

if (p) {

17	$(p).pagination({ pageNumber: 1 });

18

}

19	$("#grid").datagrid('reload');

20	return false;

21

}

 

　　以上aspx頁面的Script就差不多完成了，接下來就要處理資料面的問題，我使用了 CRUDHandler.ashx 這隻泛型處理常式來處理Server端的動作，在ashx開始我會先判斷要處理哪種作業，並且執行哪個method。

01	public void ProcessRequest (HttpContext context) {

02	if (context.Request["mode"] != null)

03

{

04	string mode =  context.Request["mode"].ToString();

05	switch(mode)

06

{

07	case "Qry":

08	QueryData(context);

09

break;

10	case "INS":

11	InsertData(context);

12

break;

13	case "DEL":

14	DeleteData(context);

15

break;

16

}

17

}

18

}

 

　　在查詢的部分我使用SQL資料分頁的方式取得資料並回傳Client端，DataGrid 預設會POST兩個參數回Server端。

• page: 目前頁數
• rows: 顯示的筆數

 

　　在Server端必須接收這兩個參數後再去資料庫取得分頁資料，如果需要增加額外的參數就如同我上面的Script碼寫法增加，一個查詢的程式碼大概如下:

01

//查詢資料

02	public void QueryData(HttpContext context)

03

{

04	//資料庫分頁取得資料方法

05	string page = context.Request["page"];

06	string rows = context.Request["rows"];

07	List<users> li = new List<users>();

08	DataSet ds = GetData(int.Parse(rows), int.Parse(page), context);

09	foreach (DataRow dr in ds.Tables[0].Rows)

10

{

11	li.Add(new users()

12

{

13	id = dr["id"].ToString(),

14	name = dr["name"].ToString(),

15	age = dr["age"].ToString(),

16	address = dr["address"].ToString()

17

});

18

}

19	ReturnDate rd = new ReturnDate();

20	rd.total = ds.Tables[1].Rows[0]["TotalCount"].ToString();

21	rd.rows = li;

22	DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType());

23	json.WriteObject(context.Response.OutputStream, rd);

24

}

25

26	public class ReturnDate

27

{

28	public string total { get; set; }

29	public List<users> rows { get; set; }

30

}

31

32	public class users

33

{

34	public string id { get; set; }

35	public string name { get; set; }

36	public string age { get; set; }

37	public string address { get; set; }

38	}</users></users></users>

　　這是我的寫法，將撈出來的資料轉成JSON後在傳到Client，而其他的處理方法就可以依照你自己需求而去撰寫，我這邊就不多撰寫了，這樣就完成了一個DataGrid，實際完成的畫面如下。

 

 

範例程式碼