Explication détaillée de l'utilisation de DataGrid de jQuery EasyUI examples

Explication détaillée de l'utilisation de DataGrid de jQuery EasyUI examples_jquery

WBOY

Libérer： 2016-05-16 15:21:48

original

1406 Les gens l'ont consulté

jQuery EasyUI est un framework de développement Web frontal léger qui fournit de nombreux composants prêts à l'emploi pour aider les programmeurs à réduire la quantité de développement de code frontal. Le DataGrid a été utilisé dans un projet précédent.
Depuis la page d'accueil officielle du framework jQuery EasyUI, vous pouvez télécharger le package de développement complet, qui contient un exemple de code pour référence.

Opération de rendu :

Puisque j'utilise la technologie de formulaire Web ASP.NET, je publierai le code principal ci-dessous pour référence.
Dans la page, vous devez d'abord référencer les fichiers css et js pertinents afin de pouvoir utiliser le composant.
partie 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" />

Copier après la connexion

partie 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>

Copier après la connexion

Étant donné que jQuery EasyUI est basé sur jQuery, le fichier jQuery doit être introduit en premier. Pagination.js est le plug-in de pagination d'EasyUI, et vous verrez l'effet de pagination plus tard.

<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>

Copier après la connexion

Veuillez faire attention à ce long code js, qui est le code principal de cette page. Veuillez faire attention aux paramètres à l'intérieur, qui construisent principalement dynamiquement datagird via js.
La partie Corps de la page :

<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>

Copier après la connexion

L'id est la partie table de la grille, qui correspond à la grille dans la partie js ci-dessus.
La partie code-behind de la page :

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

Copier après la connexion

Il est très simple d'attribuer une valeur à un champ caché stocké à la réception pour maintenir l'état (enregistrer l'emplacement de l'étagère à dossiers) lors du rafraîchissement de la page.
L'adresse de la source de données d'arrière-plan est ServiceHanlder.ashx, jetez un œil au code détaillé à l'intérieur.

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; 
   } 
  } 
 } 
}

Copier après la connexion

Il n'y a pas grand chose à dire ici, c'est juste pour fournir des données pour la page front-end. Le code peut être rationalisé et traité davantage, je ne le corrigerai donc pas ici.
Une classe d'entité utilisée :

/// <summary> 
/// 分页返回数据 
/// </summary> 
public class ReturnData 
{ 
 /// <summary> 
 /// 数据总数 
 /// </summary> 
 public int total { get; set; } 
 
 /// <summary> 
 /// 具体数据 
 /// </summary> 
 public List<UserInfo> rows { get; set; } 
}

Copier après la connexion

Ce qui précède est une brève introduction aux exemples d'utilisation du DataGrid de jQuery EasyUI. J'espère que cela sera utile à l'apprentissage de chacun.