jQuery EasyUI之DataGrid使用实例详解

前端技术 2023/09/05 JavaScript

jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。
jQuery EasyUI框架的官方主页,可以下载完整开发包，里面有示例代码可以参考。

运行效果图：


由于我使用的是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; 
}

很简单就是给前台存放的一个隐藏域赋值，以在页面刷新时保持状态（记录档案架的位置）。
后台的数据源地址为ServiceHanlder.ashx，看看这里面的详细代码。

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

以上就是jQuery EasyUI之DataGrid使用实例简单介绍，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/14584

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案