jqGrid知识概括

jqGrid简介

简介：

• jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。
• 文档比较全面，其官方网址为： jqGrid
• jqGrid教程

jqGrid特性：

• 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。
• 兼容目前所有流行的web浏览器。
• Ajax分页，可以控制每页显示的记录数。
• 支持XML，JSON，数组形式的数据源。
• 提供丰富的选项配置及方法事件接口。
• 支持表格排序，支持拖动列、隐藏列。
• 支持滚动加载数据。
• 支持实时编辑保存数据内容。
• 支持子表格及树形表格。
• 支持多语言。
• 最关键目前是免费的。

jqGrid原理：

• jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。
• 对于jqGrid我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。jqGrid是用ajax来实现对请求与响应的处理。

jqGrid使用

jqGrid安装：

• jqGrid安装很简单，只需把相应的css、js文件加入到页面中即可。

/myproject/css/ 
	ui.jqgrid.css 	
	/ui-lightness/ 
		/images/ 		
		jquery-ui-1.7.2.custom.css

/myproject/js/ 
	/i18n/	 
		grid.locale-bg.js		 
		list of all language files		 
		….		 
		Changes.txt		 
		jquery-1.3.2.min.js		 
		jquery.jqGrid.min.js

• 如何使用：

1.解压压缩包
	核心文件夹:  jqgrid

2.页面中使用
	1、引入jqgrid中核心css
 	2、引入jqgrid中国际化语言文件
    3、引入jqgrid中核心js文件 
    
	<link rel="stylesheet" href="${app}/boot/css/bootstrap.min.css">
    <%--引入jqgrid中主题css--%>
    <link rel="stylesheet" href="${app}/boot/jqgrid/css/ui.jqgrid-bootstrap.css">
    <%--引入js文件--%>
    <script src="${app}/boot/js/jquery-3.3.1.min.js"></script>
    <script src="${app}/boot/js/bootstrap.min.js"