前言最近逛了逛 jQuery 資料又發現了一個新的 UI 可以使用，就是 jQuery EasyUI，沒注意到是甚麼時候出現的，之前印象只有jquery ui跟jquery tools，看了一下他的文件內容跟Demo資料，其實也提供蠻多好用的plugin，其中覺得他的datagrid感覺還不錯，順手寫了一個範例記錄一下。 jQuery EasyUi 網址: http://www. jQuery EasyUi 中文文件: http://www./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
Step 4依照官網範例其實就可以很簡單的建立起基本雛型，這邊也一樣實際做一下，針對DataGrid easyui是使用<table>標籤，所以在body內加入一個table並且設定一下表頭欄位，表頭欄位也可以在 script 內的 columns properties設定 ，dgl 的 div 是為了使用 Dialog 來做新增資料的介面。
Step 5接下來就開始撰寫 Java Script 碼，基本用法如下: $('#grid').datagrid({ url:'CRUDHandler.ashx', //處理資料面程式 columns:[[ //設定欄位 {field:'id',title:'ID',width:100}, {field:'name',title:'Name',width:100}, {field:'age',title:'Age',width:100,align:'right'}, {field:'address',title:'Address',width:100} ]] }); 這使用尚有很多種屬性可以設定，這些屬性在官方文檔內都可以找的到，在這邊我輸入的Script如下: $(function () { var qParams = { id: $("#txtid").val(), name: $("#txtname").val() }; //取得查詢參數 var oldRowIndex; var opt = $('#grid'); opt.datagrid({ width: "auto", //自動寬度 height: 320, //固定高度 nowrap: false, //不截斷內文 striped: true, //列背景切換 fitColumns: true, //自動適應欄寬 singleSelect: true, //單選列 queryParams: qParams, //參數 url: 'CRUDHandler.ashx', //資料處理頁 idField: 'id', //主索引 frozenColumns: [[{ field: 'ck', checkbox: true}]], //顯示核取方塊 pageList: [10, 15, 20], //每頁顯示筆數清單 pagination: true, //是否啟用分頁 rownumbers: true, //是否顯示列數 toolbar: [{ id: 'btnAdd', text: '新增', iconCls: 'icon-add', handler: function () { insertRow($(this)); } }], onClickRow: function (rowIndex) { if (oldRowIndex == rowIndex) { opt.datagrid('clearSelections', oldRowIndex); } var selectRow = opt.datagrid('getSelected'); oldRowIndex = opt.datagrid('getRowIndex', selectRow); } }).datagrid("getPager").pagination({ buttons: [{ id: 'btnEdit', iconCls: 'icon-edit', text: '編輯', handler: function () { editRow(); } }, '-', { id: 'btnDel', text: '刪除', iconCls: 'icon-remove', handler: function () { removeRow(); } }], onBeforeRefresh: function () { return true; } }); $("#btnQry").click(function(){ Query(); }); });
以上這段為主體的Script，這個DataGrid可以處理 查詢、新增、更新、刪除，傳輸資料的格式主要為JSON，接下來必須將對應的方法都補上，開啟新增畫面方法: //開啟新增並位移 function insertRow(opt) { var offset = opt.offset(); $('#dlg').dialog('open').dialog('setTitle', '新增資料').dialog('move', { left: offset.left, top: offset.top }); }
儲存資料方法: //儲存資料 function saveData() { if ($(".easyui-validatebox").val() != "") { $.post('CRUDHandler.ashx', 'mode=INS&' + $('#frmAjax input').serialize(), function (result) { if (result.success) { $('#dlg').dialog('close'); $.messager.alert('Success', '新增成功！', 'info', function () { $('#grid').datagrid('reload'); // reload }); } else { $.messager.alert('Error', result.msg, 'warning'); //錯誤訊息 } }, 'json'); } else $.messager.alert('警告', '未輸入ID！', 'warning'); //錯誤訊息 }
編輯資料列方法(這邊使用直接跳頁至Detail頁面處理: //編輯資料列 function editRow() { var row = $("#grid").datagrid('getSelected'); if (row != null) window.location.href = "Detail.aspx?mode=UPD&pk=" + row.id; else $.messager.alert('訊息', '尚未選擇需編輯的資料列！', 'info'); // }
刪除資料列方法: //刪除資料列 function removeRow() { var row = $("#grid").datagrid('getSelected'); if (row) { $.messager.confirm('Confirm', '確定要刪除此筆資料?', function (r) { if (r) { var index = $("#grid").datagrid('getRowIndex', row); //$('#grid').datagrid('deleteRow', index); //取得index $.post('CRUDHandler.ashx', { 'mode': 'DEL', id: row.id }, function (result) { if (result.success) { $.messager.alert('Success', '刪除成功！', 'info', function () { $('#grid').datagrid('reload'); //刷新畫面 }); } else { $.messager.alert('Error', result.msg, 'warning'); //錯誤訊息 } }, 'json'); } }); } else $.messager.alert('訊息', '尚未選擇需刪除的資料列！', 'info'); // }
查詢方法: function Query() { var qid, qname; if ($("#txtid").val() != "") qid = $("#txtid").val(); else qid = ""; if ($("#txtname").val() != "") qname = $("#txtname").val(); else qname = ""; qParams = { id: qid, name: qname }; $('#grid').datagrid('options').queryParams = qParams; $('#grid').datagrid('options').pageNumber = 1; var p = $('#grid').datagrid('getPager'); if (p) { $(p).pagination({ pageNumber: 1 }); } $("#grid").datagrid('reload'); return false; }
以上aspx頁面的Script就差不多完成了，接下來就要處理資料面的問題，我使用了 CRUDHandler.ashx 這隻泛型處理常式來處理Server端的動作，在ashx開始我會先判斷要處理哪種作業，並且執行哪個method。 public void ProcessRequest (HttpContext context) { if (context.Request["mode"] != null) { string mode = context.Request["mode"].ToString(); switch(mode) { case "Qry": QueryData(context); break; case "INS": InsertData(context); break; case "DEL": DeleteData(context); break; } } }
在查詢的部分我使用SQL資料分頁的方式取得資料並回傳Client端，DataGrid 預設會POST兩個參數回Server端。 page: 目前頁數 rows: 顯示的筆數
在Server端必須接收這兩個參數後再去資料庫取得分頁資料，如果需要增加額外的參數就如同我上面的Script碼寫法增加，一個查詢的程式碼大概如下: //查詢資料 public void QueryData(HttpContext context) { //資料庫分頁取得資料方法 string page = context.Request["page"]; string rows = context.Request["rows"]; List li = new List(); DataSet ds = GetData(int.Parse(rows), int.Parse(page), context); foreach (DataRow dr in ds.Tables[0].Rows) { li.Add(new users() { id = dr["id"].ToString(), name = dr["name"].ToString(), age = dr["age"].ToString(), address = dr["address"].ToString() }); } ReturnDate rd = new ReturnDate(); rd.total = ds.Tables[1].Rows[0]["TotalCount"].ToString(); rd.rows = li; DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType()); json.WriteObject(context.Response.OutputStream, rd); } public class ReturnDate { public string total { get; set; } public List rows { get; set; } } public class users { public string id { get; set; } public string name { get; set; } public string age { get; set; } public string address { get; set; } } 這是我的寫法，將撈出來的資料轉成JSON後在傳到Client，而其他的處理方法就可以依照你自己需求而去撰寫，我這邊就不多撰寫了，這樣就完成了一個DataGrid，實際完成的畫面如下。
範例程式碼 |
|
|
