jQuery EasyUI之DataGrid使用實(shí)例詳解

更新時(shí)間：2022年08月23日 08:45:10 作者：guwei4037

這篇文章主要介紹了jQuery EasyUI之DataGrid使用實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

jQuery EasyUI是一個(gè)輕量級(jí)的Web前端開發(fā)框架，提供了很多的現(xiàn)成組件幫助程序員減輕前端代碼開發(fā)量，之前有個(gè)項(xiàng)目中就用到了其中的DataGrid。
jQuery EasyUI框架的官方主頁,可以下載完整開發(fā)包，里面有示例代碼可以參考。

運(yùn)行效果圖：

由于我使用的是ASP.NET webform技術(shù)，下面我就貼出主要的代碼以供參考。
在頁面中首先要引用相關(guān)的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的分頁插件，后面會(huì)看到分頁的效果。

<script type="text/javascript"> 
  $(function () { 
   var qParams = { mode: 'Query', hfjia: $("#<%=hfjia.ClientID %>").val(), sfz: $("#sfz").val() }; //取得查詢參數(shù) 
   var oldRowIndex; 
   var opt = $("#grid"); 
   opt.datagrid({ 
    width: '780', 
    height: '440', 
    nowrap: false, 
    striped: true, 
    fitColumns: true, 
    singleSelect: true, 
    queryParams: qParams, //參數(shù) 
    url: '../Service/ServiceHanlder.ashx', 
    //idField: 'id', //主索引 
    //frozenColumns: [[{ field: 'ck', checkbox: true}]], 
    pageSize: 20, 
    pageList: [20, 25, 30], 
    pagination: true, //是否啟用分頁 
    rownumbers: true, //是否顯示列數(shù) 
 
    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: "身份證號(hào)", width: 80, align: "center" }, 
     { field: 'PersonName', title: "姓名", width: 40, align: "center" }, 
     { field: 'PersonSex', title: "性別", width: 30, align: "center" }, 
     { field: 'DAId', title: "檔案編號(hào)", width: 60, align: "center" } 
    //     { field: 'DAGInOrg', title: "業(yè)務(wù)經(jīng)辦機(jī)構(gòu)", width: 60, align: "center" } 
    ]] 
   }).datagrid("getPager").pagination({ 
    beforePageText: '第', //頁數(shù)文本框前顯示的漢字 
    afterPageText: '頁/{pages}頁', 
    displayMsg: '共{total}條記錄', 
    onBeforeRefresh: function () { 
     return true; 
    } 
   }); 
  }); 
</script>

請(qǐng)注意這段長長的js代碼，這是該頁面的核心代碼。里面的參數(shù)設(shè)置請(qǐng)注意，主要就是通過js動(dòng)態(tài)的構(gòu)造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="請(qǐng)掃描檔案袋上面的條形碼..." /> 
    <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部分中g(shù)rid對(duì)應(yīng)。
該頁面的后臺(tái)代碼部分：

protected void Page_Load(object sender, EventArgs e) 
{ 
 string dagid = Request.QueryString["dagid"]; 
 hfjia.Value = dagid; 
}

很簡單就是給前臺(tái)存放的一個(gè)隱藏域賦值，以在頁面刷新時(shí)保持狀態(tài)（記錄檔案架的位置）。
后臺(tái)的數(shù)據(jù)源地址為ServiceHanlder.ashx，看看這里面的詳細(xì)代碼。

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">架號(hào)</param> 
  /// <param name="page">頁數(shù)</param> 
  /// <param name="rows">行數(shù)</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 通過身份證號(hào)獲取用戶基本信息 
  /// <summary> 
  /// 通過身份證號(hào)獲取用戶基本信息 
  /// </summary> 
  /// <param name="id">身份證號(hào)</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; 
   } 
  } 
 } 
}

這里面也沒什么好說的，就是為前端頁面提供數(shù)據(jù)。代碼完全可以進(jìn)一步精簡、處理，這里就不修正了。
里面用到的一個(gè)實(shí)體類：

/// <summary> 
/// 分頁返回?cái)?shù)據(jù) 
/// </summary> 
public class ReturnData 
{ 
 /// <summary> 
 /// 數(shù)據(jù)總數(shù) 
 /// </summary> 
 public int total { get; set; } 
 
 /// <summary> 
 /// 具體數(shù)據(jù) 
 /// </summary> 
 public List<UserInfo> rows { get; set; } 
}

以上就是jQuery EasyUI之DataGrid使用實(shí)例簡單介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: