利用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 ...
随机推荐
- BZOJ 4036: [HAOI2015]按位或 集合幂函数 莫比乌斯变换 莫比乌斯反演
http://www.lydsy.com/JudgeOnline/problem.php?id=4036 http://blog.csdn.net/lych_cys/article/details/5 ...
- 【推导】zoj3981 Balloon Robot
题意:一个桌子有m个位置(首尾相接),有n支队伍坐在其中的n个位置上.有个机器人会从某个起始位置出发,每个时刻会依次发生以下三个事件: 机器人顺时针转一个单位: 某些队伍通过了题目(如果存在): 如果 ...
- 【lct】bzoj1036 [ZJOI2008]树的统计Count
题意:给你一棵树,点带权,支持三种操作:单点修改:询问链上和:询问链上max. 这里的Query操作用了与上一题不太一样的做法(上一题用那种做法,因为在边带权的情况下换根太困难啦): 先ChangeR ...
- C#双面打印解决方法(打印word\excel\图片)
最近需要按顺序打印word.excel.图片,其中有的需要单面打印,有的双面.网上查了很多方法.主要集中在几个方式解决 1.word的print和excel的printout里设置单双面 2.prin ...
- Codeforces Round #304 (Div. 2) Break the Chocolate 水题
Break the Chocolate Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/546/ ...
- Redis-用思维导图二天搞定Redis用法。
Redis整体面貌 Redis基本数据结构 1.String 1.1 数据结构 long len byte数组长度 long free 可用数组长度 char buff[] 数据内容 1.2 命令 键 ...
- IDA 中文字符串
http://www.pediy.com/kssd/pediy05/pediy50528.htm Ida Pro 的默认设置里对中文字串的支持比较差,对于首字节大于'E0'的都显示成?了.其实... ...
- Jquery UI 中Tree组件的json格式，java递归拼接demo
数据库中表数据,如下图: 实现的需求是,如果suporgcode数据为null 的情况下,表示在一级节点 "请选择" 的二级节点,然后是如:3和36 是1的子节点,一步一步的节点延 ...
- 一步一步实现listview加载的性能优化
listview加载的核心是其adapter,本文针对listview加载的性能优化就是对adpter的优化,总共分四个层次: 0.最原始的加载 1.利用convertView 2.利用ViewHol ...
- 设计原则：小议 SPI 和 API
背景 第一次听说 SPI 是阅读<软件框架设计的艺术>,以后陆续在 Log4Net 和 Quartz.Net中发现了以这种形式组织代码的方式,本位给出为什么要区分 SPI 和 API 的一 ...