本文由我司收集整编，推荐下载，如有疑问，请与我司联系
jQuery EasyUI 之 DataGrid 使用示例
2014/09/24 18421
jQuery EasyUI 是一个轻量级的 Web 前端开发框架，提供了
很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的 DataGrid。
jQuery EasyUI 框架的官方主页：jeasyui/demo/main/index.php。可以下载完整开发 包，里面有示例代码可以参考。
由于我使用的是 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 earchDA(‘“ + 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 div align=“center” input id=“sfz” runat=“server” type=“text” placeholder=“请扫描 档案袋上面的条形码...” / button id=“ssss” 档案查询 /button /div /div div table id=“grid” /table /div div input type=“button” value=“返回主菜单” id=“button1s” / /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 if if if
后台的数据源地址为
ProcessRequest(HttpContext context)
(!string.IsNullOrEmpty(context.Request[“mode”])) (context.Request[“mode”].Equals(“Query”))
(!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
jQuery EasyUI之DataGrid使用示例
