jQuery EasyUI之DataGrid使用示例
jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。
jQuery EasyUI框架的官方主页：http://www.jeasyui.com/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 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 = ;
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(';')[], @"\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 == "").Skip(Convert.ToInt32(rows) * (Convert.ToInt32(page) - )).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('-')[] + "-" + hfjia.Split('-')[];
DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, out msg);
if (dt != null && dt.Rows.Count > )
{
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的使用方式总结
JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...
- 给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...
- 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...
- jquery easyui的datagrid在初始化的时候会请求两次URL？
我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...
- 给Jquery easyui 的datagrid 每行添加操作链接
背景 我们都知道Jquery的Easy-UI的datagrid能够加入而且自己定义Toolbar,这样我们选择一行然后选择toolbar的对应button就能够对这行的数据进行操作.但实际项目里我们可 ...
- jQuery easyUI 使用 datagrid 表格
获取后台数据依旧是使用一般处理程序(ashx) ,分页上添加一个函数(pagerFilter(data)) 前端代码: <%@ Page Language="C#" Auto ...
- JQuery EasyUI 之 DataGrid
1.动态创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: (1)页面上添加div标签 <div id=&qu ...
随机推荐
- 【21】必须返回对象时，别妄想返回器reference
1.考虑有理数Rational,有个友元操作符*,返回Rational对象.返回对象,导致临时对象的构造,析构.效率低,因此会想返回方法内局部对象的引用,这种方法不可行.为什么? 2.调用方法是在st ...
- js判断一个字符串是否在另一个字符串中存在 indexOf
使用indexOf来实现.当返回值为-1时表示不存在. 举例: var href = 'www.51qdq.com';alert(href.indexOf('test')); //返回值 -1aler ...
- Java基础 Day14 泛型
//为什么要使用泛型 //1.解决元素存储的安全性的问题 //2.解决获取元素时,须要类型转换的问题 //未使用泛型 package org.tizen.test; import java.util. ...
- Zend Studio 10正式版注册破解
1.文件和汉化文件 ZendStudio官方下载地址:http://www.geekso.com/component/zendstudio-downloads/ 百度云地址: 10.0.0.msi文件 ...
- eclipse创建项目时出现appcompat_v7包及解决办法
Android开发学习总结(三)--appcompat_v7项目说明 一.appcompat_v7项目说明 今天来说一下appcompat_v7项目的问题,使用eclipse创建Android项目时, ...
- JAVA构造器、this、super
构造器是为了创建一个类的实例.这个过程也可以在创建一个对象的时候用到: Platypus p1 = new Platypus(); 相反,方法的作用是为了执行java代码. 修饰符,返回值和命名的不同 ...
- 读jQuery官方文档：数据方法与辅助方法
数据方法 有时候你可能想要在元素上面储存数据.由于浏览器兼容性问题,用原生JavaScript处理元素上的数据可能会造成内存溢出,jQuery可以帮你自动处理这些问题: //储存和取出元素数据 $(' ...
- webstorm添加vue模板支持
字谕纪泽: 八月一日,刘曾撰来营,接尔第二号信并薛晓帆信,得悉家中四宅平定,至以为尉. 汝读”四书”无甚心得,由不能虚心涵泳,切己体察.朱子教人读书之法,此二语最为精当.尔现读”离娄”,即如“离娄”首 ...
- 用jquery-easyui中的combotree实现树形结构的选择
用jquery-easyui中的combotree实现树形结构的选择 需求:实现一个树形节点的选择,要求默认父节点都折叠,父节点前的checkbox不显示,子节点显示checkbox,且父节点不可选择 ...
- 通过公网连接云数据库Memcache--ECS Windows篇
目前云数据库Memcache是需要通过ECS的内网进行连接访问,如果用户本地需要通过公网访问云数据库Memcache,可以在ECS Windows云服务器中通过netsh进行端口映射实现. 一.搭建要 ...