系列索引

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. Swift实现封装PopMenu菜单，可在屏幕任意位置弹出

    效果图: 说明: 代码现已支持 Swift3 语法 使用介绍: 1.初始化位置 //frame 为整个popview相对整个屏幕的位置 箭头距离右边位置,默认15 //popMenu = SwiftP ...

  2. JavaScript的写类方式（6）

    时间到了2015年6月18日,ES6正式发布了,到了ES6,前面的各种模拟类写法都可以丢掉了,它带来了关键字 class,extends,super. ES6的写类方式 // 定义类 Person c ...

  3. The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.

    今天项目中报了如下错误 The last packet sent successfully to the server was 0 milliseconds ago. The driver has n ...

  4. mvn常用命令

    1. mvn compile 编译源代码 2. mvn test-compile 编译测试代码 3. mvn test 运行测试 4. mvn package 打包,根据pom.xml打成war或ja ...

  5. redis配置文件redis.conf中文版

    转账自:http://www.jb51.net/article/50605.htm # Redis示例配置文件 # 注意单位问题:当需要设置内存大小的时候,可以使用类似1k.5GB.4M这样的常见格式 ...

  6. 从一个url输入浏览器到页面渲染出来，这个过程都发生了哪些事情？

    经典问题:在浏览器输入一个url后,会发生什么事情呢? (1)假设是简单的http请求(GET),IPV4,无代理. 浏览器先查看浏览器缓存-系统缓存-路由器缓存,若缓存中有,请略过中间步骤,直接跳到 ...

  7. Python+selenium自动化脚本编辑过程中遇到的问题和小技巧

    应该也不算是问题和技巧,算是实践中学习到的Python,记录下,也不定时更新 1.通过截取url判断 实例: self.assertEqual(self.broswer.current_url[sel ...

  8. [普通平衡树splay]【学习笔记】

    参考: http://blog.csdn.net/clove_unique/article/details/50630280 gty课件 找一个好的风格太难了,自己习惯用struct,就强行用stru ...

  9. 除非Microsoft FTP 服务（FTPSVC）正在运行，否则无法启动FTP站点。服务目前已停止

    ftp站点就建成了,试下启动,右击站点,"管理ftp站点"-"启动".如果启动不了,出现“除非Microsoft FTP 服务(FTPSVC)正在运行,否则无法 ...

  10. ReactNative新手学习之路01-创建项目开始

    新手学习之路01-创建项目开始 小菜鸟准备学习RN开发,决定写下自己的学习历程,方便其他也想要学习RN的人,后期会持续更新写下自己所有学习经历,一步步从菜鸟成长成业内高手.开发环境准备,本文默认环境已 ...