jQuery EasyUI之DataGrid使用樣本，jqueryeasyui
jQuery EasyUI是一個輕量級的Web前端開發架構，提供了很多的現成組件協助程式員減輕前端代碼開發量，之前有個項目中就用到了其中的DataGrid。
jQuery EasyUI架構的官方首頁：http://www.jeasyui.com/demo/main/index.php。可以下載完整開發包，裡面有範例程式碼可以參考。
由於我使用的是ASP.NET webform技術，下面我就貼出主要的代碼以供參考。
在頁面中首先要引用相關的css以及js檔案，這樣才能使用該組件。
css部分：
<link href="../Js/jQueryEasyUI/theme/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../Js/jQueryEasyUI/theme/icon.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="../Css/datagrid.css" />js部分：
<script src="../Js/jQueryEasyUI/jquery-1.7.1.min.js" type="text/javascript"></script><script src="../Js/jQueryEasyUI/jquery.easyui.min.js" type="text/javascript"></script><script src="../Js/jQueryEasyUI/jquery.pagination.js" type="text/javascript"></script>由於jQuery EasyUI基於jQuery，所以必需要先引入jQuery檔案。而pagination.js是EasyUI的分頁外掛程式，後面會看到分頁的效果。
<script type="text/javascript"> $(function () { var qParams = { mode: 'Query', hfjia: $("#<%=hfjia.ClientID %>").val(), sfz: $("#sfz").val() }; //取得查詢參數 var oldRowIndex; var opt = $("#grid"); opt.datagrid({ width: '780', height: '440', nowrap: false, striped: true, fitColumns: true, singleSelect: true, queryParams: qParams, //參數 url: '../Service/ServiceHanlder.ashx', //idField: 'id', //主索引 //frozenColumns: [[{ field: 'ck', checkbox: true}]], pageSize: 20, pageList: [20, 25, 30], pagination: true, //是否啟用分頁 rownumbers: true, //是否顯示列數 onClickRow: function (rowIndex) { if (oldRowIndex == rowIndex) { opt.datagrid('clearSelections', oldRowIndex); } var selectRow = opt.datagrid('getSelected'); oldRowIndex = opt.datagrid('getRowIndex', selectRow); }, columns: [[ { title: "瀏覽檔案", width: 20, align: "center", formatter: function (value, rowData, rowIndex) { return "<font onclick=searchDA('" + rowData.PersonIdNum + "'); color='blue' > 查看檔案 </font>"; } }, { field: 'DAGInPosition', title: "檔案位置", width: 40, align: "center" }, { field: 'PersonIdNum', title: "社會安全號碼", width: 80, align: "center" }, { field: 'PersonName', title: "姓名", width: 40, align: "center" }, { field: 'PersonSex', title: "性別", width: 30, align: "center" }, { field: 'DAId', title: "檔案編號", width: 60, align: "center" } // { field: 'DAGInOrg', title: "業務經辦機構", width: 60, align: "center" } ]] }).datagrid("getPager").pagination({ beforePageText: '第', //頁數文字框前顯示的漢字 afterPageText: '頁/{pages}頁', displayMsg: '共{total}條記錄', onBeforeRefresh: function () { return true; } }); });</script>請注意這段長長的js代碼，這是該頁面的核心代碼。裡面的參數設定請注意，主要就是通過js動態構造datagird。
該頁面的Body部分：
<body> <form id="form1" runat="server"> <asp:HiddenField ID="hfjia" runat="server" /> <div> <div class="form-wrapper cf" style="margin-top: 10px;"> <div align="center" style="width: 780px;"> <input id="sfz" runat="server" type="text" placeholder="請掃描檔案袋上面的條碼..." /> <button id="ssss"> 檔案查詢</button> </div> </div> <div style="float: left; width: 780px; margin-top: -40px; margin-left: 10px;"> <table id="grid"> </table> </div> <div style="float: left; margin-top: 10px; margin-left: 10px;"> <input type="button" value="返回主菜單" id="button1s" onclick="javascript: window.location.href = '../Main.aspx'" /> </div> </div> </form></body>其中id為grid的table部分，與上面的js部分中grid對應。
該頁面的後台代碼部分：
protected void Page_Load(object sender, EventArgs e){ string dagid = Request.QueryString["dagid"]; hfjia.Value = dagid;}很簡單就是給前台存放的一個隱藏欄位賦值，以在頁面重新整理時保持狀態（記錄檔案架的位置）。
namespace DAMIS.Pad2.Service{ /// <summary> /// ServiceHanlder 的摘要說明 /// </summary> public class ServiceHanlder : IHttpHandler { public void ProcessRequest(HttpContext context) { if (!string.IsNullOrEmpty(context.Request["mode"])) { if (context.Request["mode"].Equals("Query")) { if (!string.IsNullOrEmpty(context.Request["sfz"])) { string sfz = context.Request["sfz"]; UserInfo userInfo = GetUserInfoById(sfz); if (userInfo != null) { ReturnData rd = new ReturnData(); rd.total = 1; rd.rows = new List<UserInfo>() { userInfo }; DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType()); json.WriteObject(context.Response.OutputStream, rd); } else { context.Response.Write("<script>alert('查無此人');</script>"); } } else { string hfjia = Regex.Match(context.Request["hfjia"].Split(';')[0], @"\d+").Value; string page = context.Request["page"]; string rows = context.Request["rows"]; QueryData(hfjia, page, rows, context); } } if (context.Request["mode"].Equals("QueryInner")) { string dajid = context.Request["dajid"].Trim('\''); string dagid = context.Request["dagid"]; string hfjia = string.Join("-", dajid, dagid); string page = context.Request["page"]; string rows = context.Request["rows"]; QueryData(hfjia, page, rows, context); } } } #region 查詢檔案（分頁） /// <summary> /// 查詢檔案（分頁） /// </summary> /// <param name="hfjia">架號</param> /// <param name="page">頁數</param> /// <param name="rows">行數</param> /// <param name="context"></param> public void QueryData(string hfjia, string page, string rows, HttpContext context) { List<UserInfo> list = new List<UserInfo>(); string msg = string.Empty; DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, out msg); foreach (DataRow dr in dt.Rows) { list.Add(new UserInfo() { PersonIdNum = dr["PersonIdNum"].ToString(), PersonName = dr["PersonName"].ToString(), PersonSex = dr["PersonSex"].ToString(), DAId = dr["DAId"].ToString(), DABusKindName = dr["DABusKindName"].ToString(), DAKindName = dr["DAKindName"].ToString(), DALevelCodeName = dr["DALevelCodeName"].ToString(), DAGInPosition = dr["DAGInPosition"].ToString(), DAGInUserId = dr["DAGInUserId"].ToString(), DAGInOrg = dr["DAGInOrg"].ToString(), IsValid = dr["IsValid"].ToString(), }); } list = list.OrderBy(x => x.DAGInPosition).ToList(); ReturnData rd = new ReturnData(); rd.total = dt.Rows.Count; rd.rows = list.Where(x => x.IsValid == "0").Skip(Convert.ToInt32(rows) * (Convert.ToInt32(page) - 1)).Take(Convert.ToInt32(rows)).ToList(); DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType()); json.WriteObject(context.Response.OutputStream, rd); } #endregion #region 通過社會安全號碼擷取使用者基本資料 /// <summary> /// 通過社會安全號碼擷取使用者基本資料 /// </summary> /// <param name="id">社會安全號碼</param> /// <returns></returns> public static UserInfo GetUserInfoById(string id) { string hfjia = CommonBLL.GetUserPositionById(id); string msg = string.Empty; if (!string.IsNullOrEmpty(hfjia)) { hfjia = hfjia.Split('-')[0] + "-" + hfjia.Split('-')[1]; DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, out msg); if (dt != null && dt.Rows.Count > 0) { DataRow dr = dt.Select("personidnum = '" + id + "'").FirstOrDefault(); UserInfo userInfo = new UserInfo() { PersonIdNum = dr["PersonIdNum"].ToString(), PersonName = dr["PersonName"].ToString(), PersonSex = dr["PersonSex"].ToString(), DAId = dr["DAId"].ToString(), DABusKindName = dr["DABusKindName"].ToString(), DAKindName = dr["DAKindName"].ToString(), DALevelCodeName = dr["DALevelCodeName"].ToString(), DAGInPosition = dr["DAGInPosition"].ToString(), DAGInUserId = dr["DAGInUserId"].ToString(), DAGInOrg = dr["DAGInOrg"].ToString(), IsValid = dr["IsValid"].ToString(), }; return userInfo; } } return null; } #endregion public bool IsReusable { get { return false; } } }}這裡面也沒什麼好說的，就是為前端頁面提供資料。代碼完全可以進一步精簡、處理，這裡就不修正了。
裡面用到的一個實體類：
/// <summary> /// 分頁返回資料 /// </summary> public class ReturnData { /// <summary> /// 資料總數 /// </summary> public int total { get; set; } /// <summary> /// 具體資料 /// </summary> public List<UserInfo> rows { get; set; } }
最終的：
這個簡單啊 哥，你把例子下下來，包考進去，建立個jsp檔案，引入js檔案。拷貝demo就可以了。
jquery easyui裡的datagrid刪除行方法(deleteRow)怎使用
建議別用easyui，相容性不好，自己做一個吧
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
