利用JqGrid结合ashx及EF分页显示列表之二
上一篇文章简单利用JqGrid及ashx进行一个数据列表的显示，要文的重点是利用EF的分页与JqGrid进行结合，EF本文只是简单运用所以没有很规范，重点还是JqGrid分页的实现;本实例把JqGrid一些比较经常用到的内容封装到一个JS里面；
首先看下实例完成后的效果图：
1:数据库表创建并往中插入200000条数据：
CREATE TABLE [dbo].[T_School](
[ID] [int] IDENTITY(,) NOT NULL,
[SchoolName] [nvarchar]() COLLATE Chinese_PRC_CI_AS NULL,
[BuildDate] [datetime] NULL,
[Address] [nvarchar]() COLLATE Chinese_PRC_CI_AS NULL,
[IsSenior] [bit] NULL,
[StudentNum] [int] NULL,
CONSTRAINT [PK_T_School] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
2:myJqgrid.js封装后的JqGird代码：
/*
* 返回json格式中 最好默认带有ID列
默认显示 20列 * 列表id = "gridTable"
列表url = 'Handler.ashx?action=page'
列表datatype = 'json'
列表colNames = ['ID', "名称", '性别', '手机', '邮箱']
列表colModel = 。。。
列表标题 caption = "用户列表"
列表修改URL editurl = "Handler.ashx?action=oper"
列表默认排序 sortname = "ID";
页码ID gridPagerID = "gridPager"
*/
//最后选中的行
var lastsel;
function myJqGrid(id, url, datatype, colNames, colModel, caption, editurl, sortname, gridPagerID) {
var myGrid = $("#" + id);
myGrid.jqGrid({
url: url,
datastr: "data.json",
datatype: datatype,
rowNum: ,
rowList: [, , ],
colNames: colNames,
colModel: colModel,
jsonReader: {
repeatitems: false,
root: function (obj) { return obj.rows; },
page: function (obj) { return obj.pageindex; },
total: function (obj) { return obj.pagecount; },
records: function (obj) { return obj.total; }
},
prmNames: {
page: 'PageIndex',
rows: 'PageSize',
sort: 'Order',
order: 'Sort'
},
hidegrid: false,
rownumbers: true,
loadonce: false,
sortname: sortname,
sortorder: 'desc',
pager: "#" + gridPagerID,
viewrecords: true,
caption: caption,
toolbar: [true, "top"],
altRows: true,
//最后选中的行
onSelectRow: function (id) {
if (id && id !== lastsel) {
grid.jqGrid('restoreRow', lastsel);
lastsel = grid.jqGrid('getRowData', id)[sortname];
}
},
editurl: editurl
});
}
其中要注意这两部分的参数，其中pagecount-json中代表页码总数的数据,total-json中代表数据行总数的数据,pageindex-json中代表当前页码的数据;prmNames则是重命名传到后台的分页参数名称；
传到后台的URL:GET /CountryHandler.ashx?_search=false&nd=1397394772871&PageSize=20&PageIndex=1&Order=ID&Sort=desc
jsonReader: {
repeatitems: false,
root: function (obj) { return obj.rows; },
page: function (obj) { return obj.pageindex; },
total: function (obj) { return obj.pagecount; },
records: function (obj) { return obj.total; }
},
prmNames: {
page: 'PageIndex',
rows: 'PageSize',
sort: 'Order',
order: 'Sort'
},
3:Html代码及JS代码：
<head runat="server">
<title></title>
<link href="css/ui-lightness/jquery-ui-1.10.4.min.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/myJqgrid.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
showJqGrid();
});
function showJqGrid() {
var id = "gridTable";
var url = "CountryHandler.ashx";
var datatype = "json";
var colNames = ["ID", "名称","地址"];
var colModel = [
{ name: "ID", index: "ID"},
{
name: "SchoolName", index: "SchoolName", width: , align: "center"
},
{
name: "Address", index: "Address", width: , align: "center"
}
];
var caption = "学校列表";
var editurl = "CountryHandler.ashx";
var sortname = "ID";
var gridPagerID = "gridPager";
myJqGrid(id, url, datatype, colNames, colModel, caption, editurl, sortname, gridPagerID);
//initToolbar(id, gridPagerID);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="gridTable">
</table>
<div id="gridPager">
</div>
</form>
</body>
</html>
4:后台的一般处理文件CountryHandler.ashx代码：
using System.Web.Script.Serialization;
using ClassLibrary1;
using DAL;
namespace WebApplication1
{
/// <summary>
/// CountryHandler 的摘要说明
/// </summary>
public class CountryHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
DAL.TestDbEntities contexts = new TestDbEntities();
context.Response.ContentType = "text/plain";
var quey = from School in contexts.T_School select School;
GridDatas model = new GridDatas();
int PageIndex= RequstString("PageIndex").Length == ? : int.Parse(RequstString("PageIndex"));
int PageSize=RequstString("PageSize").Length == ? : int.Parse(RequstString("PageSize")); int TotalCount=quey.Count<T_School>();
model.pagecount = (TotalCount/PageSize).ToString();
model.pageindex = PageIndex.ToString();
model.total = TotalCount.ToString();
model.rows = quey.OrderBy(t=>t.ID).Skip((PageIndex - ) * PageSize).Take(PageSize).ToList(); JavaScriptSerializer serializer = new JavaScriptSerializer();
string Resul = serializer.Serialize(model);
context.Response.Write(Resul);
} public static string RequstString(string sParam)
{
return (HttpContext.Current.Request[sParam] == null ? string.Empty
: HttpContext.Current.Request[sParam].ToString().Trim());
} public bool IsReusable
{
get
{
return false;
}
}
} public class GridDatas
{
public string pageindex { set; get; } public string pagecount { get; set; } public string total { get; set; } public List<T_School> rows { get; set; }
}
}
注意：同样借实体类GridDatas来实同JqGrid要求的JSON格式；转化成后的Json代码如下:
{"pageindex":"","pagecount":"","total":"","rows":[{"RelationshipManager":{},"ID":,"SchoolName":"中学教育0","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":2,"SchoolName":"中学教育1","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":3,"SchoolName":"中学教育2","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":4,"SchoolName":"中学教育3","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":5,"SchoolName":"中学教育4","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":6,"SchoolName":"中学教育5","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":7,"SchoolName":"中学教育6","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":8,"SchoolName":"中学教育7","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":9,"SchoolName":"中学教育8","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":10,"SchoolName":"中学教育9","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":11,"SchoolName":"中学教育10","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":12,"SchoolName":"中学教育11","BuildDate":"\/Date
()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":13,"SchoolName":"中学教育踏浪帅
","BuildDate":"\/Date()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":355},{"RelationshipManager":{},"ID":14,"SchoolName":"中学教育
","BuildDate":"\/Date()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":15,"SchoolName":"中学教育
","BuildDate":"\/Date()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":16,"SchoolName":"中学教育
","BuildDate":"\/Date()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":17,"SchoolName":"中学教育
","BuildDate":"\/Date()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":18,"SchoolName":"中学教育
","BuildDate":"\/Date()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":456},{"RelationshipManager":{},"ID":19,"SchoolName":"中学教育踏
浪帅18","BuildDate":"\/Date()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":456},{"RelationshipManager":{},"ID":20,"SchoolName":"中学教
育19","BuildDate":"\/Date()\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390}]}
感谢您的阅读，坚持每天进步一点点，离成功就更近一步；希望文章对您有所帮助；[源代码下载]
利用JqGrid结合ashx及EF分页显示列表之二的更多相关文章
- 利用JqGrid结合ashx显示列表之一
最近项目决定运用JqGrid列表控件显示相关数据,以前接触比较多还是easyui和Ext.Net的列表控件,文章简单写的小实例进行一个总结: 1:引入相关的JS及CSS文件,JqGrid目前可以利用J ...
- [flask]分页显示列表
添加分页支持的视图函数 app.py @app.route('/search') def search(): page = request.args.get('page', 1, type=int) ...
- 自制MVC框架CRUD操作、列表、分页显示插件介绍
这里涉及到的操作都是引用自Stephen.DALService数据层.数据访问层实现方式在后文中我会仔细的说明,先说明一下数据操作集成的插件. 1).InsertAttribute 用于插入记录. 状 ...
- SharePoint 2013 自定义翻页显示列表项
项目需求:自定义开发一个能分页显示列表项的小部件,允许左右翻页,能根据用户权限来显示管理链接等. 效果如下: 技术要求:使用sharepoint rest API 来获取列表项,这样性能高,能够快速响 ...
- Spring boot入门（三）：SpringBoot集成结合AdminLTE(Freemarker)，利用generate自动生成代码，利用DataTable和PageHelper进行分页显示
关于SpringBoot和PageHelper,前篇博客已经介绍过Spring boot入门(二):Spring boot集成MySql,Mybatis和PageHelper插件,前篇博客大致讲述了S ...
- 利用Flask-SQLAlchemy提供的paginate()方法实现博客文章的分页显示
在开发blog系统的时候,我们有一个需求,就是要显示作者已经发表的blog文章的列表,或显示作者关注者的文章列表.实现这个功能并不复杂,只需要在存储文章的数据库中过滤出指定作者的文章,然后渲染HTML ...
- 基于jqgrid + ashx + nhibernate的分页
因为我目前运维的是一个webform项目,项目中未用到分页的功能,我百度了很多文章也没有一篇是结合jqgrid + ashx + nhibernate的分页,可能是因为后台要请求ashx的原因,不像m ...
- EF分页中的陷阱
(一) 前言 EF使用非常简单,但是如果使用不当就会误入EF陷阱中. ...
- 基于MySQl的分页显示
<%@page import="java.sql.DriverManager"%> <%@page import="java.sql.ResultSet ...
随机推荐
- [CC-SEABUB]Sereja and Bubble Sort
[CC-SEABUB]Sereja and Bubble Sort 题目大意: 一个\(n(n\le100)\)个数的排列\(A\),有两种操作: 交换两个相邻元素: 等概率随机打乱整个序列. 最多执 ...
- Java并发（二）：Java内存模型
一.硬件内存架构 一个现代计算机通常由两个或者多个CPU.其中一些CPU还有多核.每个CPU在某一时刻运行一个线程是没有问题的.如果你的Java程序是多线程的,在你的Java程序中每个CPU上一个线程 ...
- SpringMVC集成Swagger插件以及Swagger注解的简单使用
一.简介 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新 .接口的方法,参数和模型 ...
- Codeforces Beta Round #7 C. Line Exgcd
C. Line 题目连接: http://www.codeforces.com/contest/7/problem/C Description A line on the plane is descr ...
- uoj 66 新年的巧克力棒 数学
#66. 新年的巧克力棒 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/66 Description 马上就要 ...
- 如何解决IIS7上传文件大小限制，.NET 上传文件后 找不到目录解决
IIS7 默认文件上传大小是30M,那么超过30M的文件就无法上传了,那么就需要对IIS的配置文件进行修改. 在实际应用中往往会出现上传文件太大,无法上传的情况,那是因为IIS对上传文件大小有限制,I ...
- CentOS 6.9/7通过yum安装指定版本的JDK/Maven
说明:通过yum好处其实很多,环境变量不用配置,配置文件放在大家都熟悉的地方,通过rpm -ql xxx可以知道全部文件的地方等等. 一.安装JDK(Oracle JDK 1.8) # wget -- ...
- Java常量字符串String理解 String理解
以前关于String的理解仅限于三点:1.String 是final类,不可继承2.String 类比较字符串相等时时不能用“ == ”,只能用 "equals" 3.Strin ...
- Can a windows dll retrieve its own filename?
http://stackoverflow.com/questions/2043/can-a-windows-dll-retrieve-its-own-filename A windows exe fi ...
- Druid 配置_StatViewServlet配置
https://github.com/alibaba/druid/wiki/%E9%85%8D%E7%BD%AE_StatViewServlet%E9%85%8D%E7%BD%AE Druid内置提供 ...