jQueryEasyUI之DataGrid使用示例
jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。
成都创新互联公司是一家专注于成都网站制作、成都网站建设与策划设计,深泽网站建设哪家好?成都创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:深泽等地区。深泽做网站价格咨询:18982081108
jQuery EasyUI框架的官方主页：http://www.jeasyui.com/demo/main/index.php。可以下载完整开发包，里面有示例代码可以参考。
由于我使用的是ASP.NET webform技术，下面我就贴出主要的代码以供参考。
在页面中首先要引用相关的css以及js文件，这样才能使用该组件。
css部分：
js部分：
由于jQuery EasyUI基于jQuery，所以必需要先引入jQuery文件。而pagination.js是EasyUI的分页插件，后面会看到分页的效果。
$(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 " 查看档案 ";
}
},
{ 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;
}
});
});
请注意这段长长的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 Proce***equest(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; }
}
最终的效果图：
网站题目：jQueryEasyUI之DataGrid使用示例
文章源于：
http://kswjz.com/article/pgcgpe.html
