利用JqGrid结合ashx显示列表之一
最近项目决定运用JqGrid列表控件显示相关数据，以前接触比较多还是easyui和Ext.Net的列表控件，文章简单写的小实例进行一个总结；
1:引入相关的JS及CSS文件,JqGrid目前可以利用Jquery UI的皮肤：
<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>
2:Html签标（一个用于列表显示 一个用于分页的存放）：
<body>
<form id="form1" runat="server">
<table id="list">
</table>
<div id="pager3">
</div>
</form>
</body>
3:JS内容：
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: 'HandlerTest.ashx',
datatype: "json",
mtype: "GET",
colNames: ['ID', 'UserName'],
colModel: [
{ name: 'ID', index: 'ID', width: },
{ name: 'UserName', index: 'UserName', width: } ],
rowNum: ,
loadonce: true,
sortname: 'ID',
viewrecords: true,
sortorder: 'desc',
caption: "客户列表",
jsonReader: {
repeatitems: false,
root: function (obj) { return obj.rows; },
page: function (obj) { return obj.page; },
total: function (obj) { return obj.total; },
records: function (obj) { return obj.records; }
}
}).navGrid("#pager3", { edit: false, add: false, del: false });
});
</script>
上面的代码可以查看jqGrid相关属性说明，其中比较重要的jsonReader,刚开始没有编写这个导致数据一直显示不出来；JqGrid对数据的显示格式要求比较严格，
例如下面这个是一个比较准确的JSON格式显示；其属性分别代码分页的相关属性及数据的显示格式；
{
"page": "",
"total": "",
"records": "",
"rows": [
{
"ID": ,
"UserName": "Wujy"
},
{
"ID": ,
"UserName": "踏浪帅"
}
]
}
4:后端代码HandlerTest.ashx：
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization; namespace WebApplication1
{
/// <summary>
/// HandlerTest 的摘要说明
/// </summary>
public class HandlerTest : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<ChinaUser> list = new List<ChinaUser>(){new ChinaUser() { ID=,UserName="Wujy"},
new ChinaUser() { ID=,UserName="踏浪帅"}
}; GridData model = new GridData();
model.page = "";
model.records = "";
model.total = "";
model.rows = list; JavaScriptSerializer serializer = new JavaScriptSerializer();
string Resul = serializer.Serialize(model);
context.Response.Write(Resul);
} public bool IsReusable
{
get
{
return false;
}
}
} public class ChinaUser
{
public int ID { set; get; }
public string UserName { get; set; }
} public class GridData
{
public string page { set; get; } public string total { get; set; } public string records { get; set; } public List<ChinaUser> rows { get; set; }
}
}
二：（补充）接下来设置复杂表头及双击响应事件；
1：后台代码如下：
namespace WebApplication1
{
/// <summary>
/// HandlerTest 的摘要说明
/// </summary>
public class HandlerTest : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<ChinaUser> list = new List<ChinaUser>(){new ChinaUser() { ID=,UserName="Wujy",PassWord="", Address="厦门", Sex="男"},
new ChinaUser() { ID=,UserName="踏浪帅3",PassWord="", Address="厦门3", Sex="男3"},
new ChinaUser() { ID=,UserName="踏浪帅4",PassWord="", Address="厦门4", Sex="男4"},
new ChinaUser() { ID=,UserName="踏浪帅5",PassWord="", Address="厦门5", Sex="男5"},
new ChinaUser() { ID=,UserName="踏浪帅6",PassWord="", Address="厦门6", Sex="男6"}
}; GridData model = new GridData();
model.page = "";
model.records = "";
model.total = "";
model.rows = list; JavaScriptSerializer serializer = new JavaScriptSerializer();
string Resul = serializer.Serialize(model);
context.Response.Write(Resul);
} public bool IsReusable
{
get
{
return false;
}
}
} public class ChinaUser
{
public int ID { set; get; }
public string UserName { get; set; }
public string PassWord { get; set; }
public string Sex { get; set; }
public string Address { get; set; }
} public class GridData
{
public string page { set; get; } public string total { get; set; } public string records { get; set; } public List<ChinaUser> rows { get; set; }
}
}
2：前台代码如下：
<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 type="text/javascript">
$(function () {
$("#list").jqGrid({
url: 'HandlerTest.ashx',
datatype: "json",
mtype: "GET",
colNames: ['ID', 'UserName', 'PassWord', 'Address', 'Sex'],
colModel: [
{ name: 'ID', index: 'ID', width: },
{ name: 'UserName', index: 'UserName', width: },
{ name: 'PassWord', index: 'PassWord', width: },
{ name: 'Address', index: 'Address', width: },
{ name: 'Sex', index: 'Sex', width: } ],
rowNum: ,
rowList: [, , ],
loadonce: true,
sortname: 'ID',
viewrecords: true,
sortorder: 'desc',
pager: "#pager3",
caption: "客户列表",
jsonReader: {
repeatitems: false,
root: function (obj) { return obj.rows; },
page: function (obj) { return obj.page; },
total: function (obj) { return obj.total; },
records: function (obj) { return obj.records; }
},
ondblClickRow: function () { SelectShow(); }
}).navGrid("#pager3", { edit: false, add: false, del: false }); jQuery("#list").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{ startColumnName: 'PassWord', numberOfColumns: , titleText: '<em>Info</em>' }
]
}); }); function SelectShow() {
var ID = jQuery("#list").jqGrid('getGridParam', 'selrow');
if (ID) {
alert("您选中的列为:" + ID);
$("#list").trigger("reloadGrid");
}
else {
alert("请选择");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="list">
</table>
<div id="pager3">
</div>
</form>
</body>
</html>
其中下面的代码就是组成复杂表头（表示从哪一列开始，并有几列在其下面,显示的头部名称）：
jQuery("#list").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{ startColumnName: 'PassWord', numberOfColumns: , titleText: '<em>Info</em>' }
]
});
双击事件并刷新列表的代码如下ondblClickRow: function () { SelectShow(); }：
function SelectShow() {
var ID = jQuery("#list").jqGrid('getGridParam', 'selrow');
if (ID) {
alert("您选中的列为:" + ID);
$("#list").trigger("reloadGrid");
}
else {
alert("请选择");
}
}
通过上面几步就可以显示列表数据；
注意:
1:网上有很多的JSON在线验证是否正确，例如:http://jsonformatter.curiousconcept.com/ http://jsonlint.com/
2:在访问上面的页面时可以通过网络查看器发现其请求的URL为：
/HandlerTest.ashx?_search=false&nd=1397385085506&rows=10&page=1&sidx=ID&sord=desc 其中可以发现它自动带个几个参数，所以后台可以运用上面的参数进行分页显示；
3:JqGrid官网实例地址：www.trirand.com/blog/jqgrid/jqgrid.html
感谢您的阅读，坚持每天进步一点点，离成功就更近一步；希望文章对您有所帮助；
利用JqGrid结合ashx显示列表之一的更多相关文章
- 利用JqGrid结合ashx及EF分页显示列表之二
上一篇文章简单利用JqGrid及ashx进行一个数据列表的显示,要文的重点是利用EF的分页与JqGrid进行结合,EF本文只是简单运用所以没有很规范,重点还是JqGrid分页的实现;本实例把JqGri ...
- 关于jqgrid数据不显示问题
近日有个需求要用到jqgrid,原本用着一切都很顺利,但是在需求变动后,只是修改部分字段名称jqgrid就不显示数据了,后台数据也能传到前台,但是就是不给我显示,到嘴的肉就是没法吃,蛋疼,郁闷都无法形 ...
- [OpenGL] 斯坦福兔子与显示列表
1.调整桌子的大小. 在OpenGL绘制长方体,能够通过函数: glutSolidCube(Size) 绘制得到的是一个正方体,再利用缩放矩阵使其变成长方体.使得桌子 ...
- OpenGL中glVertex、显示列表(glCallList)、顶点数组(Vertex array)、VBO及VAO区别
OpenGL中glVertex.显示列表(glCallList).顶点数组(Vertex array).VBO及VAO区别 1.glVertex 最原始的设置顶点方法,在glBegin和glEnd之间 ...
- NeHe OpenGL教程 第十二课：显示列表
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- SharePoint 2013 自定义翻页显示列表项
项目需求:自定义开发一个能分页显示列表项的小部件,允许左右翻页,能根据用户权限来显示管理链接等. 效果如下: 技术要求:使用sharepoint rest API 来获取列表项,这样性能高,能够快速响 ...
- 如何将经纬度利用Google Map API显示C# VS2005 Sample Code
原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上 ...
- Android BLE与终端通信（二）——Android Bluetooth基础科普以及搜索蓝牙设备显示列表
Android BLE与终端通信(二)--Android Bluetooth基础搜索蓝牙设备显示列表 摘要 第一篇算是个热身,这一片开始来写些硬菜了,这篇就是实际和蓝牙打交道了,所以要用到真机调试哟, ...
- 利用jQuery与.ashx完成简单的Ajax
在ASP.NET同样可以与其它编程语言一样,利用前台的Ajax技术,只是需要注意的是,后台的处理程序不再是一个aspx页面中的Page_Load,而且ASP.NET独有的“一般处理程序”.ashx,下 ...
随机推荐
- 某DP题目4
题意 有两个栈分别有n和m个数,每次从任意栈中取出一个数,令k为不同输出序列的总数,其中第i种输出序列的产生方式有ai个,求Σai2. n <= 500 分析 此题是关于ai2转换.咋一看此题好 ...
- BSGS 模板
模板如下: 扩展版本: 求解a^k=b %p 求k,最小的k一定小于p,否则会重复,否则无解 *********************** gcd(a,p)=1时 设k=mi+v m=sqrt(p) ...
- hihocoder 1519 : 逃离迷宫II
题目链接 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi被坏女巫抓进里一间有N x M个格子组成的矩阵迷宫. 有些格子是小Hi可以经过的,我们用'.'表示:有些格 ...
- Android 基于蓝牙的方向控制器
最近开发了一个蓝牙控制器App,用手机远程控制小球的运动. 包含了一些基础知识:多线程使用,页面UI数据更新,按钮事件,选择项功能,蓝牙功能(蓝牙打开,蓝牙搜索,蓝牙连接,蓝牙命令发送,蓝牙命令接收) ...
- Vlan访问控制ACL
Author:JinDate:2014-07-05 一.情况描述调整前TP-LINK上联光猫 WLAN PPPOE 拨号,LAN 192.168.1.1 DHCP功能 提供给目前在7楼的办公TP-LI ...
- js利用正则替换图片路径问题
/* * 需求:给图片的src地址前面增加为assets * * 1. 将需要匹配的内容原封不动的写入正则表达式 * 2. 将改变的内容替换为.*? * 3. 将.*?添加(),目的是为了能够将src ...
- 支持Tasker控制的app合集
跟各种Tasker插件打交道,原因有两点: 1.站在开发者的角度:Tasker虽为神器,也不能面面俱到,一个原因就是Android自身过于分裂化造成的,不可能兼顾全平台和机型:个人开发者精力有限,也满 ...
- MC34063组成DC-DC电路
+VO的输出电压峰值可达2倍V_IN,-VO的输出电压可达-V_IN. 需要注意的是,3路的峰值电路不能超过1.5A,同时两路附加电源的输出功率和必须小于V_IN·I·(1-D), 其中I为主输出的电 ...
- Si4355 低电流 Sub-GHz接收器
Silicon Labs 的 Si4355 是易于使用的.低电流.Sub-GHz EZRadio® 接收器.覆盖所有主要波段,结合了即插即用的简单性和需要处理各种不同应用的灵活性.紧凑的 3 mm x ...
- Idea下Python开发平台的搭建
1. python的下载 https://www.python.org/downloads/ 2. idea下python插件的安装 点击File->Settings...->Plugin ...