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笔记@简单实现的更多相关文章

  1. IIC驱动学习笔记,简单的TSC2007的IIC驱动编写,测试

    IIC驱动学习笔记,简单的TSC2007的IIC驱动编写,测试 目的不是为了编写TSC2007驱动,是为了学习IIC驱动的编写,读一下TSC2007的ADC数据进行练习,, Linux主机驱动和外设驱 ...

  2. 图解HTTP学习笔记——简单的HTTP协议

    简单的HTTP协议 前言 最近在学习Web开发的相关知识,发现<图解HTTP>这本书通俗易懂.所以花时间学习这本书,并记录下学习笔记. 如上图,我们每天都在浏览网页,一般我们都是在浏览器地 ...

  3. Redis设计与实现读书笔记——简单动态字符串

    前言 项目里用到了redis数据结构,不想只是简单的调用api,这里对我的读书笔记做一下记录.原文地址: http://www.redisbook.com/en/latest/internal-dat ...

  4. Verilog学习笔记简单功能实现（二）...............全加器

    先以一位全加器为例:Xi.Yi代表两个加数,Cin是地位进位信号,Cout是向高位的进位信号.列表有:   Xi     Yi    Cin Sum Cout 0 0 0 0 0 0 0 1 1 0 ...

  5. jqgrid笔记

    //重置列表请求url var url = "url?name="+name; $(grid_list_selector).jqGrid('setGridParam',{url:u ...

  6. Verilog学习笔记简单功能实现（八）...............同步FIFO

    Part 1,功能定义: 用16*8 RAM实现一个同步先进先出(FIFO)队列设计.由写使能端控制该数据流的写入FIFO,并由读使能控制FIFO中数据的读出.写入和读出的操作(高电平有效)由时钟的上 ...

  7. Verilog学习笔记简单功能实现（六）...............计数分频电路

    在分频器电路中最重要的概念有两个:1)奇分频/偶分频:2)占空比. A)其中最简单的就是二分频电路,占空比为50%,其Verilog程序为 module half_clk(clr,clk_in,clk ...

  8. Verilog学习笔记简单功能实现（四）...............译码器和编码器

    这里以简单的3-8译码器和8-3编码器为例: module decoder3_8(a,out); :]a; :]out; 'b1<<a;/*把最低位的1左移in位(根据in口输入的值)并赋 ...

  9. JavaScript学习笔记-简单的倒计时跳转页面

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

随机推荐

  1. Django问题汇总

    Q1.运行python manage.py runserver后,出现如下错误(CentOS6.5x86,Python2.7.12,Django1.10): django.core.exception ...

  2. PHP学习笔记14-操作session

    PHP会话管理图: 创建index: <?php /** * Created by PhpStorm. * User: Administrator * Date: 2015/7/2 * Time ...

  3. System.Web Namespce

    System.Web概述: System.Web是.NET中web应用开发的一个基础类库,定义浏览器与服务器之间的所有操作方法,包括请求输入流(HttpRequest).输出流(HttpRespons ...

  4. 更改firefox默认搜索引擎

    使用Organizie Search Engines 这个插件  这个插件似乎不能添加搜索引擎 但是可以修改搜索引擎 好吧 由于有时候firefox会自动更新搜索引擎  所以不要对Google搜索引擎 ...

  5. PCB设计铜铂厚度、线宽和电流关系

    以下总结了网上八种电流与线宽的关系公式,表和计算公式,虽然各不相同(大体相近),但大家可以在实际的PCB板设计中,综合考虑PCB板的大小,通过电流,选择一个合适的线宽. 一.PCB电流与线宽 PCB载 ...

  6. Codeforces 41D Pawn 简单dp

    题目链接:点击打开链接 给定n*m 的矩阵 常数k 以下一个n*m的矩阵,每一个位置由 0-9的一个整数表示 问: 从最后一行開始向上走到第一行使得路径上的和 % (k+1) == 0 每一个格子仅仅 ...

  7. ViewPager+Fragment实现支持左右滑动的Tab

    主要思想:顶部标题栏top.xml,中间ViewPager(4个Fragment),底部导航 top.xml和bottom.xml在我之前的两个随笔里有,此处不再赘述. activity_main.x ...

  8. 我的Python成长之路---第三天---Python基础（9）---2016年1月16日（雾霾）

    一.集合 set和dict类似,也是一组key的集合,但不存储value.由于key不能重复,所以,在set中,没有重复的key. 集合和我们数学中集合的概念是一样的,也有交集,并集,差集,对称差集等 ...

  9. jQuery如何设置自增自减值

    一直不是很记得jquery中怎么设置自增值,比如当点击按钮时 div在当前宽度基础上增加宽度100px,可以这样写: $('button.test').click(function(){ $('div ...

  10. 整数运算：CPU内部只有加法运算

    学汇编的一边儿去.我这里讲的是CPU进行计算的原理.首先我这里用MC的红石电路模拟了一个加法器:http://www.0xaa55.com/thread-313-1-1.htm首先加法器是怎么实现的呢 ...