编程 Javascript

jQuery EasyUI之DataGrid使用实例详解

Posted in Javascript onJanuary 04, 2016

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 EasyUI之DataGrid使用实例详解

- Author -

guwei4037

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 新手24条实用建议[TUTS+]

Jun 21 Javascript

onkeypress字符按键兼容所有浏览器使用介绍

Apr 24 Javascript

js动态添加表格数据使用insertRow和insertCell实现

May 22 Javascript

JavaScript使用Math.Min返回两个数中较小数的方法

Apr 06 Javascript

详解JavaScript UTC时间转换方法

Jan 07 Javascript

jQuery获取及设置表单input各种类型值的方法小结

May 24 Javascript

jQuery实现订单提交页发送短信功能前端处理方法

Jul 04 Javascript

JavaScript基于DOM操作实现简单的数学运算功能示例

Jan 16 Javascript

利用Javascript实现简单的转盘抽奖

Feb 13 Javascript

浅析Vue 和微信小程序的区别、比较

Aug 03 Javascript

微信小程序模板消息推送的两种实现方式

Aug 27 Javascript

js调用网络摄像头的方法

Dec 05 Javascript

JavaScript原型及原型链终极详解

Jan 04 #Javascript

jQuery实现简单的点赞效果

May 29 #Javascript

jQuery+Ajax实现无刷新操作

Jan 04 #Javascript

使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办

Jan 04 #Javascript

javascript从定义到执行你不知道的那些事

Jan 04 #Javascript

基于jQuery实现交互体验社会化分享代码附源码下载

Jan 04 #Javascript

jquery中cookie用法实例详解(获取,存储,删除等)

Jan 04 #Javascript