利用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 ...
随机推荐
- 数据准备<1>:数据质量检查-理论篇
数据行业有一句很经典的话--"垃圾进,垃圾出"(Garbage in, Garbage out, GIGO),意思就是,如果使用的基础数据有问题,那基于这些数据得到的任何产出都是没 ...
- [BZOJ4651][NOI2016]网格(Tarjan)
下面直接给出结论,相关证明见官方题解. 1.若跳蚤数不超过1或仅有两只跳蚤且相邻,则答案为-1. 2.若跳蚤形成的连通块个数大于1,则答案为0. 3.若跳蚤之间建图存在割点,则答案为1. 4.否则为2 ...
- web.xml2.3配置需要注意的顺序问题
今天在做一个街道办事处项目时,用了eWebeditor编辑器,在按照说明文件进行web.xml配置时,在<web-app>一行上出现红叉,提示信息为:The content of elem ...
- JQ自定义下拉列表插件
自从上次做了JQ自定义分页插件和表格插件后,就没在自定义过插件了,这一个月都在用linq和ef,基本前端都没怎么去碰了,今天有个同事说有个项目需要在下拉框里面带有复选框,本来想网上找下插件的,一想,其 ...
- 装饰者模式：轻松记住IO类的关系与API
开门见山 目录 概述与模型 1.概述 含义:动态地将责任附加到对象上.若要拓展功能,装饰者提供了比继承更有弹性的替代方案. 初衷:需要动态为某一个类拓展.通常我们会使用继承,但是继承的话,会产生很多子 ...
- Java过滤任意(script,html,style)标签符,返回纯文本--封装类
import java.util.regex.Pattern; /** * 过滤标签字符串,返回纯文本 * */ public class ChangePlainText { ...
- chrome插件开发-----------将网址转化成二维码website2QRcode
微信自带的浏览器无法输入链接,仅仅能通过扫描二维码实现.可是有时候看到一个有趣的站点,想分享,还得先去将链接转化成二维码的站点.先转成二维码.再扫描.有点麻烦.所以写了一个插件.直接生成二维码. 须要 ...
- [IIS]由安装IIS和.net framework先后顺序引发的问题，你中招了吗？
引言 最近帮别人做了一个小网站,在本机部署测试的时候,竟然浏览不了aspx后缀的页面,但可以浏览html页面,由此想到了IIS对静态页和动态页不同的处理方式. http请求到达服务器 当服务器接收到一 ...
- ou have not concluded your merge (MERGE_HEAD exists)
今天获取git线上仓库代码报了这个错误: zhangzhi@moke:~/code/ktsg-api$ git pull You have not concluded your merge (MERG ...
- EntityFramework：我想我需要和 Session.Save 语义一样的方法
背景 EntityFramework 中 DbSet.Add 方法不会导致立即执行 insert 语句,这在长事务中非常有用,不过多数用例都是短事务的,为何我需要一个立即执行 insert 语句的方法 ...