码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-06-29 18:35:43      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:

 

系列索引

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

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

标签:

原文地址:http://www.cnblogs.com/jhlong/p/5627782.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!