欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery EasyUI之DataGrid使用实例详解_jquery

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

运行效果图:

jQuery EasyUI之DataGrid使用实例详解_jquery

由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考。
在页面中首先要引用相关的css以及js文件,这样才能使用该组件。
css部分:

js部分:


由于jQuery EasyUI基于jQuery,所以必需要先引入jQuery文件。而pagination.js是EasyUI的分页插件,后面会看到分页的效果。


请注意这段长长的js代码,这是该页面的核心代码。里面的参数设置请注意,主要就是通过js动态的构造datagird。
该页面的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 
{ 
 ///  
 /// ServiceHanlder 的摘要说明 
 ///  
 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 }; 
 
       DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType()); 
       json.WriteObject(context.Response.OutputStream, rd); 
      } 
      else 
      { 
       context.Response.Write(""); 
      } 
     } 
     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 查询档案(分页) 
  ///  
  /// 查询档案(分页) 
  ///  
  /// 架号 
  /// 页数 
  /// 行数 
  ///  
  public void QueryData(string hfjia, string page, string rows, HttpContext context) 
  { 
   List list = new List(); 
   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 通过身份证号获取用户基本信息 
  ///  
  /// 通过身份证号获取用户基本信息 
  ///  
  /// 身份证号 
  ///  
  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; 
   } 
  } 
 } 
} 

这里面也没什么好说的,就是为前端页面提供数据。代码完全可以进一步精简、处理,这里就不修正了。
里面用到的一个实体类:

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

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