系列索引

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. W3School-CSS 轮廓（Outline)实例

    CSS 轮廓(Outline)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内 ...

  2. Windows下Apache + PHP SESSION丢失的惨痛经历

    今天的工作是迁移一个PHP站点至新服务器. 创建一台Windows Server 2008虚拟机,并在其上停掉net stop http服务(避免争抢80端口),安装配置 Apache + PHP,迁 ...

  3. html之长文本框置顶

    方法: 在<body> </body>中添加如下代码: <a name="top"></a> <a href="#t ...

  4. android 学习JSON

    JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据 ...

  5. python paramiko 进行文件上传处理

    #!/usr/bin/env python # -*- coding:utf-8 -*- import paramiko import uuid class Ha(object): def __ini ...

  6. Java报表工具FineReport导出EXCEL的四种API

    在实际的应用中会经常需要将数据导出成excel,导出的方式除原样导出还有分页导出.分页分sheet导出和大数据量导出.对于excel 2003版,由于限制了每个sheet的最大行数和列数,大数据量导出 ...

  7. selenium对Alert弹框的多种处理

    Alert弹框是一个很烦人的控件,因为当前页面如果弹出了该弹框,你必须要处理它,不然你就不能操作页面的其它元素,下面我列出了alert弹框在多种场景下的处理办法. 明确知道系统哪个地方会弹alert ...

  8. POJ1274 The Perfect Stall[二分图最大匹配]

    The Perfect Stall Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23911   Accepted: 106 ...

  9. java 经典程序 100 例

    1,编写程序,判断给定的某个年份是否是闰年.闰年的判断规则如下:( 1)若某个年份能被 4 整除但不能被 100 整除,则是闰年.( 2)若某个年份能被 400 整除,则也是闰年. import ja ...

  10. createElement与createDocumentFragment的点点区别

    在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...