jqGrid笔记@简单实现
jqGrid在MVC中的版本是已经通过 HtmlHelper 的扩展方法封装后的产物,webForm版本貌似也将其封装成了服务器端空间,所以我推荐下载原生的jqGrid版本的地址为:http://www.trirand.com/blog/?page_id=6
推荐的Demo学习网址为:http://trirand.com/blog/jqgrid/jqgrid.html
Documentation:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
jqGrid中的一些概念:
我们调用jqGrid的时候用的语法是:
jQuery("#grid_id").jqGrid(options);
这里的option是一系列的键值对,可以是方法、属性值、事件,其中有些是可选的,有些事必须的,你可以将我下面的demo中的options作为参考。
第一个jqGrid Demo
接收json数据时候的前台代码: 如果要前台要接受xml数据,前台代码请看:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:conventions <head runat="server">
<meta name="viewport" content="width=device-width" /> <script src="../../Scripts/jquery-1.7.2.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.21.custom.min.js"></script>
<script src="../../Scripts/grid.locale-en.js"></script>
<script src="../../Scripts/jquery.jqGrid.min.js"></script> <script type="text/javascript">
$(function () {
jQuery("#list2").jqGrid({
url: '/Home/ReturnJson',
datatype: "json",
colNames: ['Name', 'PhoneNo', 'EmailAddress'],
colModel: [
{ name: 'Name', index: 'Name', width: 55 },
{ name: 'PhoneNo', index: 'PhoneNo', width: 90 },
{ name: 'EmailAddress', index: 'EmailAddress', width: 100 },
],
sortname: 'Name',
autoWidth:false,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
autoencode: true,
sortorder: "desc",
caption: "JSON Example",
jsonReader: {
repeatitems: false
},
});
jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false }); })
</script>
<title>Index</title>
</head>
<body>
<div>
<table id="list2"></table>
<div id="pager2"></div>
</div>
</body>
</html> 返回json数据的后台代码后台代码:
MVC中返回xml数据时候需要扩展,扩展的方式请看:http://www.cnblogs.com/xfrog/archive/2011/01/06/1929212.html
public ActionResult Second()
{
return View();
} public JsonResult ReturnJson(int page,int rows,string search,string sidx,string sord)
{
TestModel[] data = new TestModel[] {
new TestModel{id=1,Name="张三", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
new TestModel{id=2,Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},
new TestModel{id=3,Name="王五", PhoneNo="789", EmailAddress="wangwu@gmail.com"},
};
int currentPage = Convert.ToInt32(page)-1;
int totalRecords = data.Length;
var totalPages = (int)Math.Ceiling(totalRecords/(float)rows); var jsonData = new
{
page=page,
total=totalPages,
records=totalRecords,
rows = data
}; return Json(jsonData,JsonRequestBehavior.AllowGet);
}
但我们能够成功的run起来我们的demo以后,如果要实现一些特殊的功能,我们可以从demo中进行学习,在文章额考试我们给出了demo的地址。
jqGrid笔记@简单实现的更多相关文章
- IIC驱动学习笔记,简单的TSC2007的IIC驱动编写,测试
IIC驱动学习笔记,简单的TSC2007的IIC驱动编写,测试 目的不是为了编写TSC2007驱动,是为了学习IIC驱动的编写,读一下TSC2007的ADC数据进行练习,, Linux主机驱动和外设驱 ...
- 图解HTTP学习笔记——简单的HTTP协议
简单的HTTP协议 前言 最近在学习Web开发的相关知识,发现<图解HTTP>这本书通俗易懂.所以花时间学习这本书,并记录下学习笔记. 如上图,我们每天都在浏览网页,一般我们都是在浏览器地 ...
- Redis设计与实现读书笔记——简单动态字符串
前言 项目里用到了redis数据结构,不想只是简单的调用api,这里对我的读书笔记做一下记录.原文地址: http://www.redisbook.com/en/latest/internal-dat ...
- Verilog学习笔记简单功能实现(二)...............全加器
先以一位全加器为例:Xi.Yi代表两个加数,Cin是地位进位信号,Cout是向高位的进位信号.列表有: Xi Yi Cin Sum Cout 0 0 0 0 0 0 0 1 1 0 ...
- jqgrid笔记
//重置列表请求url var url = "url?name="+name; $(grid_list_selector).jqGrid('setGridParam',{url:u ...
- Verilog学习笔记简单功能实现(八)...............同步FIFO
Part 1,功能定义: 用16*8 RAM实现一个同步先进先出(FIFO)队列设计.由写使能端控制该数据流的写入FIFO,并由读使能控制FIFO中数据的读出.写入和读出的操作(高电平有效)由时钟的上 ...
- Verilog学习笔记简单功能实现(六)...............计数分频电路
在分频器电路中最重要的概念有两个:1)奇分频/偶分频:2)占空比. A)其中最简单的就是二分频电路,占空比为50%,其Verilog程序为 module half_clk(clr,clk_in,clk ...
- Verilog学习笔记简单功能实现(四)...............译码器和编码器
这里以简单的3-8译码器和8-3编码器为例: module decoder3_8(a,out); :]a; :]out; 'b1<<a;/*把最低位的1左移in位(根据in口输入的值)并赋 ...
- JavaScript学习笔记-简单的倒计时跳转页面
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
随机推荐
- .NET参数化Oracle查询参数
最近在做数据库移植工作(SqlServer 2008 -> Oracle 11g),遇到一些不兼容的问题,以下是一个参数化方面的区别,资料来自其他网友,在此整理了一下. public stati ...
- SQL——找出某一字段中内容相同的数据
SELECT columnName from dbo.tableName group by columnName having count(*)>1
- Android最新源码4.3下载-教程 2013-11
Android最新源码4.3下载-教程 有的下载会出现问题: 需要 修改manifest.xml中的fetch: "git://Android.git.linaro.org/" ...
- Handler总结
一.整体工程图 二.activity_handler.xml <?xml version="1.0" encoding="utf-8"?> < ...
- leetcode第一刷_Set Matrix Zeroes
这个题乍一看非常easy,实际上还挺有技巧的.我最開始的想法是找一个特殊值标记.遇到一个0,把他所相应的行列中非零的元素标记成这个特殊值.0值保持不变,然后再从头遍历一次,碰到特殊值就转化成0. 问题 ...
- ThreadLocal 和 InheritableThreadLocal (引用)
ThreadLocal:http://www.cnblogs.com/moonandstar08/p/4912673.html InheritableThreadLocal: http://www. ...
- grub2的/etc/default/grub文件详解
# If you change this file, run 'update-grub' afterwards to update# /boot/grub/grub.cfg.GRUB_DEFAULT= ...
- 一致性算法--Paxos
分布式一致性算法--Paxos Paxos算法是莱斯利·兰伯特(Leslie Lamport)1990年提出的一种基于消息传递的一致性算法.Paxos算法解决的问题是一个分布式系统如何就某个值(决议) ...
- 使用MongoDB的开源项目(转)
根据谷歌的搜索结果筛选出来的. 统计应用 counlty https://count.ly/ mongopress 开源CMS系统 http://www.mongopress.org/ Rubedo ...
- Chapter 17 Replication 复制
Chapter 17 Replication 复制 Table of Contents 17.1 Replication Configuration 17.2 Replication Implemen ...