Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
系列索引
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 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;
数据库操作类
View Code
用到的实体类
用户实体
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 目录下。
