系列索引

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视图弹出、平移、旋转、翻转、剪切等变换效果实现

    效果图: 1.定义属性 @property (nonatomic, strong) UIView *transformView;//发生变换的试图 @property (nonatomic, stro ...

  2. qt5.4.0编译错误

    error1: 进程"C:\Qt\Qt5.4.0\Tools\QtCreator\bin\jom.exe"退出,退出代码 2 solution:去工具->选项->构建和 ...

  3. 浅谈Linux中的信号处理机制（三）

    一晃眼,已经到9月底了,都来不及去感慨时间匆匆.最近常常会想明年的今天我将会在那里干着什么样的工作?对未来又是憧憬又是担忧,压力山大.无论如何现在还是踏踏实实的学习吧,能这样安安静静学习的日子也不多了 ...

  4. monkeyrunner之电脑安装驱动（五）

    在Monkeyrunner做自动化测试时,可以使用模拟器,当然也可以选择用真机.不过,要想通过电脑来安装软件,操作手机,则必须先安装手机驱动,而且一般手机连接电脑之后,电脑会自动开始下载驱动.不过也经 ...

  5. 【原】移动web页面兼容处理的思考

    本月收到一份关爱里程碑的邮件,入职满3周年了,从一个懵懂的新人到从容淡定的小油条,在外辛苦打工不容易,能收到一封简单的关怀邮件也是有感欣慰,这里祝愿公司越发展越好. 进入主题,移动网页设计中,很多同学 ...

  6. 基于C/S架构的3D对战网络游戏C++框架 _02系统设计（总体设计、概要设计）

    本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...

  7. WCF学习笔记一

    Windows Communication Foundation(WCF)是由微软开发的一系列支持数据通信的应用程序框架,可以翻译为Windows 通讯开发平台. 整合了原有的windows通讯的 . ...

  8. .NET和JAVA同等加密方法，MD5和DES对称加密记录

    C#版: using System; using System.Security.Cryptography; using System.Text; namespace ConsoleApplicati ...

  9. 使用VelocityTracker来完成MotionEvent移动速率计算

    先看效果图 关键代码(此处记录单点): switch (event.getAction()){ case MotionEvent.ACTION_DOWN: if (veloctiy==null) { ...

  10. poj1986 LCA

    Distance Queries Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 11759   Accepted: 4157 ...