jqgrid 分页（基于ashx）

1:数据库表创建并往中插入200000条数据：

复制代码

CREATE TABLE [dbo].[T_School](

[ID] [int] IDENTITY(1,1) NOT NULL,

[SchoolName] [nvarchar](255) COLLATE Chinese_PRC_CI_AS NULL,

[BuildDate] [datetime] NULL,

[Address] [nvarchar](50) 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: 20,

rowList: [10, 20, 50],

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代码：

复制代码

$(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: 200, align: "center"

{

name: "Address", index: "Address", width: 250, 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>

</table>

</p>

</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 == 0 ? 1 : int.Parse(RequstString("PageIndex"));

int PageSize=RequstString("PageSize").Length == 0 ? 20 : 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 - 1) * 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":"1","pagecount":"10000","total":"200000","rows":[{"RelationshipManager":{},"ID":1,"SchoolName":"中学教育0","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":2,"SchoolName":"中学教育1","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":3,"SchoolName":"中学教育2","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":4,"SchoolName":"中学教育3","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":5,"SchoolName":"中学教育4","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":6,"SchoolName":"中学教育5","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":7,"SchoolName":"中学教育6","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":8,"SchoolName":"中学教育7","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":9,"SchoolName":"中学教育8","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":10,"SchoolName":"中学教育9","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":11,"SchoolName":"中学教育10","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":12,"SchoolName":"中学教育11","BuildDate":"\/Date

(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":13,"SchoolName":"中学教育踏浪帅

12","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":355},{"RelationshipManager":{},"ID":14,"SchoolName":"中学教育

13","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":15,"SchoolName":"中学教育

14","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":16,"SchoolName":"中学教育

15","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":17,"SchoolName":"中学教育

16","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":18,"SchoolName":"中学教育

17","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":456},{"RelationshipManager":{},"ID":19,"SchoolName":"中学教育踏

浪帅18","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":456},{"RelationshipManager":{},"ID":20,"SchoolName":"中学教

育19","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390}]}

jqgrid 分页（基于ashx）的更多相关文章

JqGrid分页按钮图标不显示的bug
开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...
jqGrid 分页
这两天一直在搞jqGrid分页,焦头烂额,不过还是有点收获的(主要是后台分页): jqGrid分页可以分为两种,远程数据(服务器数据)分页和本地数据分页, 先看远程数据分页: $(&q ...
jqGrid jqGrid分页参数+条件查询
HTML <div class="row"> <div class="col-sm-20"> <form id="for ...
jqgrid 分页时，清空原表格数据加载返回的新数据
由于,我们是动态分页,分页后的数据是在触发分页后动态加载而来.如何使jqgrid清空原数据而加载新数据? 1)调用jqgrid的 clearGridData 方法清空表格数据 2)调用jqgrid的 ...
本地数据jqGrid分页
var mydata=''; $(function() { var str = ''; str += "<span>共<span id='p_total'></ ...
LayUI分页基于ASP.NET MVC
---恢复内容开始--- 今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 ...
利用JqGrid结合ashx及EF分页显示列表之二
上一篇文章简单利用JqGrid及ashx进行一个数据列表的显示,要文的重点是利用EF的分页与JqGrid进行结合,EF本文只是简单运用所以没有很规范,重点还是JqGrid分页的实现;本实例把JqGri ...
Jqgrid的用法总结与分页功能的拓展
这是本人写的第一个与技术相关的博客,但是非挑战技术的,而是对工作的总结,另外加一点点拓展. Jqgrid的功能十分强大,强大到可以做到与数据grid相关的任何功能,同时由于在用的过程中总是不能够一气呵 ...
利用JqGrid结合ashx显示列表之一
最近项目决定运用JqGrid列表控件显示相关数据,以前接触比较多还是easyui和Ext.Net的列表控件,文章简单写的小实例进行一个总结: 1:引入相关的JS及CSS文件,JqGrid目前可以利用J ...

随机推荐

windows net 命令（转载）
CMD-NET命令详解 net命令大全,net命令用法,net网络命令,net命令使用,net命令集,net命令介绍,net常用命令,net命令的使用技巧,net命令如何使用大家在操作Windows ...
SSIS 实用表达式部分总结
下面,列出一些实用的表达式: 1,路径取文件名 RIGHT([FilePath],FINDSTRING(REVERSE([FilePath]),) - ) RIGHT(@[User::FilePath ...
eclipse 更换 JDK 版本后报错
在实际开发过程中,可能由于项目的需要,我们需要更换 JDK 的版本.但是更换后会报错,如下: Java compiler level does not match the version of the ...
Git详解之三：Git分支
Git 分支几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作.在很多版本控制系统中,这是个昂贵的过程,常常需要创建一个源代码目录的 ...
APP开发选择什么框架好? 请看这里!
背景 App的开发一般都需要满足Android和iOS两个系统环境,也就意味着一个App需要定制两套实现方案,造成开发成本和维护成本都很高.为了解决这个问题,最好的办法就是实现一套代码跨端运行,所以H ...
鸟哥的linux私房菜学习-（四）linux命令的基本概念
一.命令格式及使用方式注意到上面的说明当中,『第一个被输入的数据绝对是命令或者是可运行的文件』! 这个是很重要的概念喔!还有,按下[Enter]键表示要开始运行此一命令的意思. 如下效果一样: 二. ...
Java学习笔记-嵌套类
嵌套类嵌套类有两种类别:static and non-static,分别对应为静态嵌套类和内部类. class OuterClass { ... static class StaticNestedC ...
Python爬取视频(其实是一篇福利)
窗外下着小雨,作为单身程序员的我逛着逛着发现一篇好东西,来自知乎你都用 Python 来做什么?的第一个高亮答案. 到上面去看了看,地址都是明文的,得,赶紧开始吧. 下载流式文件,requests库 ...
mac上使用appium连接真机问题
1.链接真机时一直报错 app is not install 日志如下: 解决办法:是因为lockdown挂了,在命令行输入sudo chmod -R 777 /var/db/lockdown/ 但是 ...
file上传图片获取路径地址
file上传图片获取路径地址类似:点击button,选择图片,在对应的输入框input里面显示图片路径地址类似这样原理:通过opacity来隐藏原生的input file 然后用.file-bt ...

jqgrid 分页 （基于ashx）

jqgrid 分页 （基于ashx）的更多相关文章

随机推荐

热门专题

jqgrid 分页（基于ashx）

jqgrid 分页（基于ashx）的更多相关文章