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

运行效果图：

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

js部分：

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

").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,{ field: 'PersonName',title: "姓名",{ field: 'PersonSex',title: "性别",width: 30,{ field: 'DAId',title: "档案编号",width: 60,align: "center" } 
//     { field: 'DAGInOrg',title: "业务经办机构",align: "center" } 
]]

}).datagrid("getPager").pagination({
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页/{pages}页',displayMsg: '共{total}条记录',onBeforeRefresh: function () {
return true;
}
});
});

请注意这段长长的js代码，这是该页面的核心代码。里面的参数设置请注意，主要就是通过js动态的构造datagird。该页面的Body部分：

其中id为grid的table部分，与上面的js部分中grid对应。该页面的后台代码部分：

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

/// 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>() { 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,context); 
}

}
}

region 查询档案（分页）

///

/// 查询档案（分页）
///

/// <param name="hfjia">架号
/// <param name="page">页数
/// <param name="rows">行数
/// <param name="context">
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 通过身份证号获取 用户基本信息

///

/// 通过身份证号获取用户基本信息
///

/// <param name="id">身份证号
///
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(),}; 
 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使用实例简单介绍，希望对大家的学习有所帮助。

jQuery EasyUI之DataGrid使用实例详解

region 查询档案（分页）

endregion

region 通过身份证号获取 用户基本信息

endregion

猜你在找的jQuery相关文章