利用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 ...
随机推荐
- 「SCOI2016」美味
「SCOI2016」美味 题目描述 一家餐厅有 \(n\) 道菜,编号 \(1 \ldots n\) ,大家对第 \(i\) 道菜的评价值为 \(a_i \:( 1 \leq i \leq n )\) ...
- HDU 4183
给出一个有向图,以及src和dst.判断是否存在从src到dst的两条路径,使得除了src和dst外,没有其它点同时属于两条路径. 给每个点一个为1的点容量(src和dst为2),边的容量也是1,然后 ...
- JSONObject 和 JSONArray 的区别和用法
JSONObject 和 JSONArray 的数据表现形式不同: JSONObject的数据是用 { } 来表示的,例如: { "id" : "1", &q ...
- noip200807传纸条
试题描述: 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的 ...
- python开发_bisect
现在有如下的需求: ''' 实现这样的一个功能: 对一个班级的学生的成绩做出一些评定,评定规则是: one: [0-60) -- F two: [60-70) -- D three: [70-80) ...
- uva 6959 Judging hash
Judging Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/problem/viewProb ...
- MySQL 之 Index Condition Pushdown(ICP)
简介 Index Condition Pushdown (ICP)是MySQL 5.6 版本中的新特性,是一种在存储引擎层使用索引过滤数据的一种优化方式. 当关闭ICP时,index 仅仅是data ...
- 常用Linux命令集锦-ls命令
1.命令格式:ls [选项] [目录名] 2.常用参数 -a:列出该目录下所有文件(包含隐藏文件). -A:列出该目录下除了隐藏文件的所有文件. -l:以行显示目录下的所有文件.输出信息从左到右分别是 ...
- JS 判断PC、android、ios、微信浏览器
1.通过js userAgent来判断 <h1>判断访问此链接的操作系统</h1> <script> var Agents = new Array("An ...
- Java过滤任意(script,html,style)标签符,返回纯文本--封装类
import java.util.regex.Pattern; /** * 过滤标签字符串,返回纯文本 * */ public class ChangePlainText { ...