jQuery EasyUI之DataGrid使用实例详解

2019-11-20 10:51:51

字体：大中小

来源：转载

供稿：网友

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使用实例简单介绍，希望对大家的学习有所帮助。

上一篇：实例详解jQuery结合GridView控件的使用方法

下一篇：JavaScript原型及原型链终极详解