系列索引

Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

Web jquery表格组件 JQGrid 的使用 - 全部代码

Web jquery表格组件 JQGrid 的使用 - 11.问题研究

JQGrid导出Excel文件

目录

开发环境

数据库准备

数据库操作类

用到的实体类

开发环境

jqGrid 4.5.2
visual studio 2013
jquery-1.11.1
MySQL5.5

数据库准备

很简单一个用户表 user,字段 UserId 用户 id 主键，UserName 用户名，Password 密码
CREATE TABLE IF NOT EXISTS ` user` (

 `UserId` int(11) NOT NULL AUTO_INCREMENT,

 `UserName` varchar(40) DEFAULT NULL,

 `Password` varchar(50) NOT NULL,

 PRIMARY KEY (`UserId`),

 UNIQUE KEY `UserId_UNIQUE` (`UserId`)

) ENGINE=InnoDB AUTO_INCREMENT=29 DEFAULT CHARSET=utf8;

数据库操作类

用到的实体类

用户实体
public partial class User

 {

 public int UserId { get; set; }

 public string UserCode { get; set; }

 public string Password { get; set; }

}
搜索实体
这里先不用管，后面可能用到：
public class GridSearch

 {

 public string groupOp { get; set; }

 public List<GridSearchRules> rules { get; set; }

}

public class GridSearchRules

 {

 public string field { get; set; }

 public string op { get; set; }

 public string data { get; set; }

 }
第一个 grid
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

 <script src="JQGrid/jquery-1.11.1.min.js"></script>

 <link href="JQGrid/jquery-ui-1.11.1.custom/jquery-ui.css" rel="stylesheet" />

 <script src="JQGrid/grid.locale-cn.js"></script>

 <script src="JQGrid/jquery.jqGrid.js"></script>

 <link href="JQGrid/ui.jqgrid.css" rel="stylesheet" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title></title>

</head>

 <script type="text/javascript"> jQuery(function ($) {

 var grid_selector = "#grid-table";

 var pager_selector = "#grid-pager";

 jQuery(grid_selector).jqGrid({

 url: "WebService/UserHandler.ashx",

 datatype: "json",

 height: 390,

 colNames: ['Id', '用户名', '密码'],

 colModel: [

 { name: 'UserId', index: 'UserId', width: 60, sorttype: "int",

editable: true, hidden: true },

 { name: 'UserCode', index: 'UserCode', width: 90, editable: true,

editrules: { required: true } },

 { name: 'Password', index: 'Password', type: "password", width: 120,

editable: true, editrules: { required: true } },

 ],

 viewrecords: true,

 rowNum: 10,

 rowList: [10, 20, 30],

 altRows: true,

 multiselect: true,

 multiboxonly: true,

 caption: "用户管理", //"User Information Management"

 autowidth: true

 });

 });

</script>

<body>

 <form id="form1" runat="server">

 <div>

 <table id="grid-table"></table>

<div id="grid-pager"></div>

 </div>

 </form>

</body>

</html>
从上面可以清楚的看到，一个 grid 需要一个 table 作为载体。
<table id="grid-table"></table>Datatype 为 local 时从本地加载数据，为 json 时则加载 json 数据，需要设置 url 返回。其它类型
数据这里不考虑，有兴趣自行研究。
Caption 为 grid 的标题，为空则不显示标题栏。
colModel 为行定义，和 colNames 一一对应。可以设置很多属性，参考 ColModel API。
这里创建一个 HTTP handler 来从数据库加载数据。添加-新建项-web-一般处理程序，命名为
UserHandler.ashx，放在 WebService 目录下。

Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid的更多相关文章

  1. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  2. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  3. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  4. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  6. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. Web jquery表格组件 JQGrid 的使用 - 全部代码

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. 扩展HT for Web之HTML5表格组件的Renderer和Editor

    在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:真假编辑器 string:普通的文本编辑 ...

  9. 第二百二十八节，jQuery EasyUI，TreeGrid(树形表格)组件

    jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...

随机推荐

  1. iOS 10 的坑：新机首次安装 app，请求网络权限“是否允许使用数据”(转)

    症状 iOS 10 之后,陆陆续续地有用户联系我们,说新机第一次安装.第一次启动的时候,app 首屏一片空白,完全没数据.kill 掉重新打开就好了. 一开始以为是用户网络情况不好,但随着越来越多的用 ...

  2. [经验]Textbox 做日志记录，

    private void Log(string msg) { txtLog.MaxLength = ; txtLog.AppendText(msg); } 起因:在Winform中用Textbox显示 ...

  3. [AJAX]ajax在兼容模式下失效解决办法

    使用jQuery,用ajax实现局部刷新功能,在火狐,360急速浏览器高速模式下,ie8,9都能正常运行,但切换到兼容模式下无效,解决办法有两种关闭浏览器兼容性视图,二是引入json2.js文件 这里 ...

  4. 数据分析：.Net程序员该如何选择？

    上文我介绍了用.Net实现的拉勾爬虫,可全站采集,其中.Net和C#(不区分)的数据爬取开始的早,全国主要城市都有一定数量的分布,加上有了近期其他相似技术类别的数据进行横向比较,可以得到比较合理的推测 ...

  5. 2016.11.6 night NOIP模拟赛 考试整理

    题目+数据:链接:http://pan.baidu.com/s/1hssN8GG 密码:bjw8总结: 总分:300分,仅仅拿了120份. 这次所犯的失误:对于2,3题目,我刚刚看就想到了正确思路,急 ...

  6. uva 140 bandwidth （好题） ——yhx

     Bandwidth  Given a graph (V,E) where V is a set of nodes and E is a set of arcs in VxV, and an orde ...

  7. h3c防火墙的设置过程

    公司采购了一款h3c的防火墙,型号为F100-E-G,以前也设置过H3C的防火墙,不过这次还是设置还是有各种问题,所以把设置过程记录下来,方便以后查阅. 一.防火墙一般在0口都设置一个默认的IP地址1 ...

  8. MATLAB的一些基础知识

    1．已知a1=sin(sym(pi/4)+exp(sym(0.7)+sym(pi/3)))产生精准符号数字,请回答:以下产生的各种符号数哪些是精准的?若不精准,误差又是多少?能说出产生误差的原因吗? ...

  9. python高级之生成器&迭代器

    python高级之生成器&迭代器 本机内容 概念梳理 容器 可迭代对象 迭代器 for循环内部实现 生成器 1.概念梳理 容器(container):多个元素组织在一起的数据结构 可迭代对象( ...

  10. jmeter（五）Sample之JDBC Request

    jmeter中取样器(Sampler)是与服务器进行交互的单元.一个取样器通常进行三部分的工作:向服务器发送请求,记录服务器的响应数据和记录相应时间信息 有时候工作中我们需要对数据库发起请求或者对数据 ...