Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

Posted 海龙的博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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导出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;

 

数据库操作类

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 目录下。

以上是关于Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid的主要内容，如果未能解决你的问题，请参考以下文章

Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

Web jquery表格组件 JQGrid 的使用 - 7.查询数据编辑数据删除数据

Web jquery表格组件 JQGrid 的使用 - 8.Pager新增数据查询刷新查看数据

Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页搜索格式化自定义按钮

组件表格-jqGrid

组件表格-jqGrid