jqGrid入门教程：B/S架构与ajax交互
需积分: 9 179 浏览量
更新于2024-08-01
收藏 1.02MB DOC 举报
"jqGrid3.6中文文档主要讲解了jqGrid的基本原理、皮肤设置以及安装方法，重点在于其在B/S架构中的角色，利用ajax处理数据请求与响应，并支持jQuery UI主题定制。"
jqGrid是一款强大的JavaScript表格插件，用于在Web应用中展示和操作数据，特别适用于B/S（浏览器/服务器）架构。在该架构中，服务器负责数据的存储和管理，而客户端（浏览器）则专注于数据的呈现。jqGrid通过ajax技术实现了异步通信，使得用户能够在不刷新整个页面的情况下获取并更新数据，提升了用户体验。
jqGrid的核心功能包括：
1. 数据展示：它可以以网格形式展示来自服务器的数据，支持分页、排序、搜索和过滤功能。
2. 数据交互：通过ajax，jqGrid能向服务器发送请求，获取或更新数据，同时将用户在客户端的操作反馈给服务器。
3. 客户端操作：提供丰富的API，允许用户进行行选择、编辑、添加、删除等操作。
4. 自定义：支持自定义列、表头，以及通过jQuery UI主题定制界面样式。
jqGrid的皮肤设置部分提到，从3.5版本开始，它全面支持jQuery UI的主题。开发者可以从jQuery UI官方网站下载所需的theme，或者创建自定义主题。在实际应用中，只需引入必要的CSS文件，如"ui.theme.css"和"ui.core.css"，就可以改变jqGrid的外观。
安装jqGrid相当简单，主要包括将相应的CSS和JS文件添加到项目中。官方推荐的目录结构包括css和js文件夹，以及i18n文件夹用于国际化的语言文件。在页面中引入这些文件后，可以通过HTML代码设置jqGrid，例如，需要包含jQuery库、jqGrid主JS文件以及可能的语言文件。
在实际开发中，为了在页面中使用jqGrid，需要在HTML头部引用这些资源，并设置必要的配置选项，以初始化jqGrid实例。例如：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="jquery-1.3.2.min.js"></script>
<!-- 引入jqGrid CSS和JS -->
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" />
<script src="jquery.jqGrid.min.js"></script>
<!-- 引入语言文件（如果需要） -->
<script src="grid.locale-cn.js"></script>
</head>
<body>
<!-- 在这里创建jqGrid的DOM元素 -->
...
</body>
</html>
```
总结来说，jqGrid3.6中文文档主要涵盖了jqGrid的基础概念、它在B/S架构中的作用、如何利用ajax处理数据交换，以及如何定制和安装jqGrid。对于希望使用jqGrid来构建动态数据展示和交互的Web应用开发者而言，这些知识是至关重要的。
'E ####+ !L#(MF##
' N##
'H </style>##
'( ###
'* <script#C9!') 9#C9
9></script>##
'D <script#C9'* %! 9#C9
9></script>##
)> <script#C9 9#C9
9></script>##
)' ###
)) <script#C99>##
) #<#@###%"##A@# ##
)E [ Q[%+J#K#A@#NSF##
) </script>##
)H ###
)( <script#C99>##
)* [Q SQ+ QSK###
)D ##[Q9R9SQK##
> ####YYJ##
' ##
你也可以增加其他你想设置的参数。
覆盖全局参数：
在上面的例子中，我们学习了如何为你的应用程序中所有的表格设置共用的参
数。然而，有些表格可能需要用其他的参数值，即需要对我们上，面设置的全
局参数进行改变，以用于特定的表格。这时，我们可以把相应的参数改过来，
即在特定的表格重新配置一次相应的属性。例如：
< 代码
' 0123.4567##68.#9!:.242#;<4=8#'>#7?9#9
@@@@%4A'242'!9>##
) <html# C9@@@@%'DDD9# %C9 9#
%C9 9>##
<head>##
E <meta#!C9. !49# C9F#
C+!*9#/>##
<title>=#G#</title>##
H ###
( <link#C99#C99#C9 9#
+C9!% !!'('9#/>##
剩余63页未读，继续阅读
2010-08-15 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
cyz3371
- 粉丝: 34
- 资源: 4
我的内容管理
展开
最新资源
- 黑板风格计算机毕业答辩PPT模板下载
- CodeSandbox实现ListView快速创建指南
- Node.js脚本实现WXR文件到Postgres数据库帖子导入
- 清新简约创意三角毕业论文答辩PPT模板
- DISCORD-JS-CRUD：提升 Discord 机器人开发体验
- Node.js v4.3.2版本Linux ARM64平台运行时环境发布
- SQLight：C++11编写的轻量级MySQL客户端
- 计算机专业毕业论文答辩PPT模板
- Wireshark网络抓包工具的使用与数据包解析
- Wild Match Map: JavaScript中实现通配符映射与事件绑定
- 毕业答辩利器：蝶恋花毕业设计PPT模板
- Node.js深度解析：高性能Web服务器与实时应用构建
- 掌握深度图技术：游戏开发中的绚丽应用案例
- Dart语言的HTTP扩展包功能详解
- MoonMaker: 投资组合加固神器，助力$GME投资者登月
- 计算机毕业设计答辩PPT模板下载
