系列索引

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. MS Sql Server 数据库或表修复(Log日志文件损坏的修复方法)

    ----------------- [1] use master go sp_configure reconfigure with override go ----------------- [2] ...

  2. Android 中shape的使用(圆角矩形)

    一.在res/drawable文件夹下创建一个名为gradient_box的xml文件: <?xml version="1.0" encoding="utf-8&q ...

  3. c语言中类型隐性转换的坑

    谨记:在C语言中,当两种不同类型之间运算时,低字节长度类型会向高自己长度类型转换,有符号会向无符号类型转换. 举例子如下: #include <stdio.h> void func(voi ...

  4. mysql高可用架构之mysql-mmm配置详解

    实验系统:CentOS 6.6_x86_64 实验前提:防火墙和selinux都关闭 实验说明:本实验共有5台主机,IP分配如拓扑 实验软件:mariadb-10.0.20 mysql-mmm-2.2 ...

  5. 【WPF系列】基础学习-WPF设计模式概览

    引言 “设计模式”这个让程序员提起来就“酷”的东东,着实让让初学设计模式的programer自我陶醉一番.太多的经历,告诉我们“凡事都要个度,要学会适可而止”,否则过犹不及.“设计模式”也一样,切莫为 ...

  6. 第7章 权限管理（1）_ACL权限

    1. ACL权限 1.1 ACL权限简介与开启 (1)ACL权限简介 ①ACL是Access Control List的缩写,主要目的是在提供传统的owner,group,others的read,wr ...

  7. PHP实现多图片上传

    PHP实现多图片上传 今天在工作中遇到了一个需求:一个表单实现多个上传图片,类似于QQ空间上传照片的模式.即:可以一次性上传多个图片,但是封面图片只有一个. 最先,最重要的事,在服务器上对文件进行读写 ...

  8. 简单服务接口访问时权限以及缓存HashMap实现

    实现拦截器: package com.zqc.share.framework.interceptor; import javax.annotation.Resource; import javax.s ...

  9. SQLMAP大全

    转自:http://blog.csdn.net/zsf1235/article/details/50974194 本人小白,初次认识sqlmap,很多都是转载资料,只是学习研究一下! 练习的网站可以用 ...

  10. 【笔记3】用pandas实现矩阵数据格式的推荐算法 (基于用户的协同)

    原书作者使用字典dict实现推荐算法,并且惊叹于18行代码实现了向量的余弦夹角公式. 我用pandas实现相同的公式只要3行. 特别说明:本篇笔记是针对矩阵数据,下篇笔记是针对条目数据. ''' 基于 ...