Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

不打扰是莪最后的温柔 提交于 2020-03-29 19:19:03

 

系列索引

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 目录下。
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!