jQuery学习笔记——jqGrid的使用记录（实现分页、

jqGrid是一款强大的jQuery插件，用于展示网格数据，可以轻松实现前端页面与后台数据的ajax异步通信。想要学习如何使用jQuery进行前端开发，特别是处理大量数据时，jqGrid是一个非常实用的工具。下面就来了解一下它的基本使用方法。

一、使用jqGrid之前需要引入相关文件

在使用jqGrid之前，需要在页面上引入相应的CSS和JS文件。具体步骤如下：

引入CSS文件：

``

引入JS文件：

`

`

二、jqGrid的使用要点说明

获取值：在使用jqGrid时，经常需要获取各种数据值，如单个行的ID、多个选中行的ID以及所有行的ID数组等。具体实现方式如下：

分页ViewModel的奥秘

你是否想过如何在数据海洋中轻松实现分页浏览？这里有一个神奇的`jQGrid`类，它能帮你轻松实现这一功能。当提及`jQGrid`时，想必熟悉前端开发的朋友已经跃跃欲试。让我们揭开它的神秘面纱。

这个类有一个构造函数，它允许你设置每页显示的行数、当前页码、总记录数以及包含数据的JSON数组。当你初始化一个`jQGrid`对象时，只需提供这四个参数，它就能为你计算出总页数并自动设置好当前页和记录数。这种便捷性无疑为开发者节省了大量时间。

那么，如何计算总页数呢？别担心，这个类有一个强大的方法叫做`CalculateTotalPage`。它接收每页显示数和总记录数作为参数，通过计算返回总页数。这是一个看似简单的操作，但背后蕴含着强大的数学原理。

接下来，让我们聊聊搜索功能的实现。想象一下，当你在搜索框中输入关键词，并点击搜索按钮时，你想让前端与后端无缝连接，以获取最准确的结果。这一切都是怎么实现的呢？答案是jqGrid的postData方法。它就像一座桥梁，将你的搜索请求（如关键词）传递给服务器端。

当点击搜索按钮时，会触发一系列动作。它会遍历每一个搜索输入框，收集用户输入的关键字信息并将其转化为JSON格式的数据结构。然后，这些数据会与jqGrid的postData结合，形成一个完整的请求参数集合。这个集合会被发送到服务器，以获取用户想要的结果。整个过程流畅而高效，为用户带来极佳的使用体验。

`jQGrid`是一个强大的工具，无论是分页还是搜索功能，都能让你在数据海洋中轻松航行。它简化了前端开发的工作流程，提高了开发效率，为开发者带来了极大的便利。如果你正在寻找一个高效的数据展示工具，那么`jQGrid`绝对值得你一试！在构建后端应用程序时，我们经常需要从前端获取参数并进行处理。获取参数的过程是实现许多后端功能的基础步骤之一。在C中，我们可以使用ASP.NET框架提供的Request对象来获取查询参数。一旦获取到参数，我们可以利用它们执行各种操作，例如进行数据库查询等。下面是一个简单的示例代码，展示了如何获取查询参数并处理它们。

假设我们有一个名为Param的查询参数，我们可以使用以下代码获取并处理它：

我们创建一个Dictionary对象来存储参数键值对：

```csharp

Dictionary DicParam = new Dictionary();

```

然后，我们从Request对象中获取名为Param的参数值：

```csharp

string Param = Convert.ToString(Request["Param"]);

```

接下来，我们检查Param值是否为空或不存在：

```csharp

if (!string.IsNullOrEmpty(Param))

{

// 使用JavaScriptSerializer进行反序列化操作，将字符串转换为Dictionary对象

System.Web.Script.Serialization.JavaScriptSerializer sr = new System.Web.Script.Serialization.JavaScriptSerializer();

DicParam = sr.Deserialize>(Param);

}

```

有了这个字典对象后，我们可以根据需求处理这些参数。这些参数通常用于构建SQL查询语句的WHERE子句或其他业务逻辑处理。

配置属性概览：

1. ajaxGridOptions: 用于全局设置ajax参数，可以覆盖ajax事件的error、complete和beforeSend。

2. ajaxSelectOptions: 用于全局设置ajax的select参数，特别用于设置editions和searchoptions参数的select属性值。

4. altRows: 允许行交替变色设置。

5. autoencode: 决定是否对url进行编码。

8. cellLayout: 定义单元格的padding和border宽度。

9. cellEdit: 启用或禁用单元格编辑功能。

10. cellsubmit: 定义单元格内容保存的位置，如“remote”或“clientArray”。

11. cellurl: 单元格提交的url地址。

12. colModel: 设置显示列的属性的数组对象。每个列模型可以定义列的显示名称、数据类型、宽度等属性。

属性详解：

lastpage：

+ 类型：integer

+ 特性：只读属性，定义了总页数。

+ 默认值：0

lastsort：

+ 类型：integer

+ 特性：只读属性，定义了排序列的索引，从0开始。

+ 默认值：0

loadonce：

+ 类型：boolean

+ 特性：如果设置为true，则数据只从服务器端抓取一次，之后所有操作都是在客户端执行，翻页功能会被禁用。

+ 默认值：false

loadtext：

+ 类型：string

+ 特性：当请求或排序时所显示的文字内容。

+ 示例值：Loading....

loadui：

+ 类型：string

+ 特性：当执行ajax请求时的提示设置。其中，disable禁用ajax执行提示；enable默认，当执行ajax请求时的提示；block启用Loading提示，阻止其他操作。

+ 默认值：enable

mtype：

+ 类型：string

+ 特性：请求的类型，可选择“POST”或“GET”。

+ 默认值：GET

multikey：

+ 类型：string

+ 特性：只有在multiselect设置为true时起作用，定义使用那个key来做多选。可选值包括shiftKey、altKey、ctrlKey。

+ 默认值：空值

multiboxonly：

+ 类型：boolean

+ 特性：只有当multiselect = true时起作用。当multiboxonly为true时，只有选择checkbox才会起作用。

+ 默认值：false

multiselect：

+ 类型：boolean

+ 特性：定义是否可以多选。

multiselectWidth：

+ 类型：integer

+ 特性：当multiselect为true时，设置multiselect列的宽度。

+ 默认值：20

page：

+ 类型：integer

+ 特性：设置初始的页码。

+ 默认值：1（可根据实际需求设置）

pager：

+ 类型：mixed

一、位置与记录信息的呈现

1. `recordpos`属性：定义记录信息的位置，可选值为left、center、right。这一属性允许开发者根据需求调整记录信息的位置，以实现更为个性化的展示效果。

二、记录数及其显示方式

2. `records`：只读属性，返回当前的记录数。这一属性提供了关于当前数据集合的实时信息。

三、列宽调整与视觉效果

4. `resizeclass`：为列定义一个class，以便于在列宽调整时实现特定的视觉效果。这为开发者提供了更大的灵活性，可以根据实际需求定制列宽调整时的样式。

五、行序号的显示与定制

六、数据保存与选择行的管理

排序是用户常见的需求。jqGrid提供了“sortable”参数，你可以通过设置为true来启用列的排序功能。使用“sortname”和“sortorder”参数，你可以指定排序列的名称和排序顺序，将参数传递到后台进行处理。

如果你需要展示层级数据，jqGrid的“treeGrid”功能将非常有用。“treeGridModel”参数定义了树状网格的展示方式，而“treeIcons”则为不同状态的树节点设置了图标。

除此之外，jqGrid还提供了丰富的子网格功能。通过“subGrid”参数启用子网格，并使用“subGridModel”定义子网格的模型。“subGridUrl”指定了加载子网格数据的URL，而“subGridWidth”则设置了子网格的宽度。

在数字化时代，数据展示方式的创新成为吸引眼球的关键。今天，我们要的是关于数据格式的一种特殊设置，一种可以自定义排序图标显示方式的新功能。你是否想过，数据的排序图标可以变得更加生动、直观，同时操作起来更加便捷？

我们来看第一个参数设置：是否显示排序列的图标。在这个参数中，你可以选择是否仅显示当前排序列的图标。这意味着，你可以根据自己的需求，灵活地调整数据的展示方式，使数据更加直观明了。当你选择false时，系统只会显示当前排序列的图标，这样可以在繁杂的数据中突出重点，让你一目了然地找到关键信息。

接下来是第二个参数：图标的显示方式。这里有两种选择：垂直放置和水平放置。垂直放置的排序图标可以清晰地呈现数据的层级关系，使得数据的结构更加清晰；而水平放置的图标则更加简洁明了，适合扁平化的数据展示。你可以根据自己的需求选择适合的图标显示方式，以更好地展现数据的结构。

我们来关注第三个参数：单击功能的选择。如果你选择true，那么当你单击列时，数据将按照该列进行排序，为你提供更加灵活的排序方式。而如果你选择false，那么只有图标可以进行排序操作，这将使得数据的操作更加直观、便捷。这样的设计旨在提供更加个性化的操作体验，让你可以根据自己的习惯和需求来设置数据的展示和排序方式。

关于参数设置的说明

在某种技术或程序中，参数设置是非常关键的部分。以下是关于某些参数的详细解释，以帮助您更好地理解并正确设置。

一、关于排序参数的设置

若第三个参数为false，则要求第一个参数必须为true才能进行排序。这一设置是为了确保数据的排序按照预设的规则进行。

二、关于width参数的解释

该参数主要用于设置宽度，如果未进行设置，则会按照colModel中定义的宽度进行计算。这对于数据的展示和布局非常重要。

三、关于xmlReader参数的解释

xmlReader参数用于描述对xml数据结构的设置。这是一个非常重要的参数，用于和处理从服务器接收到的XML数据。

四、关于获取数据的地址（url）和数据类型（datatype）的设置

url参数用于指定获取数据的地址，这是从服务器获取数据的关键。而datatype参数则用于指定从服务器端返回的数据类型，默认为xml格式。根据实际需求，您可以根据需要设置这些参数以获取和处理数据。

一、参数介绍

1. ajax提交方式（POST或GET，默认为GET）：决定数据提交到服务器的方式。

3. colModel：设置列属性的数组。关键属性包括：

name：列显示的名称；

index：用于排序的列名称；

width：列宽度；

align：文本对齐方式；

sortable：是否允许对该列进行排序。

4. pager：定义翻页导航栏的HTML元素，可放置于页面的任意位置。

6. rowList：下拉选择框，用于改变显示的记录数，选择时将会覆盖rowNum参数并传递到后台。

7. sortname：默认的排序列，可以是列名称或数字，将提交到后台。

8. viewrecords：决定是否显示总记录数。

二、事件概述

参数包括：

rowelem：应答元素，取决于gridview的设置。

2. beforeRequest：在任何数据请求前触发，但当datatype为function时不发生。

此事件可用于在数据请求前进行某些操作或验证。

3. beforeSelectRow：在用户点击行、选中行之前触发。

参数包括行的ID和事件对象，事件将返回布尔值，决定是否允许选中该行。

5. loadBeforeSend：在XMLHttpRequest发送前触发，可修改对象属性（如headers）。

此事件提供了XMLHttpRequest对象和设置对象作为参数。

6. loadComplete：每个服务器请求完成后触发。

此事件带有数据参数，可用于处理服务器返回的数据。

7. loadError：请求失败时触发。

参数包括XMLHttpRequest对象、错误类型和错误对象，适用于错误处理和反馈。

参数包括行ID、列索引、单元格内容和点击事件对象。

事件详解

一、ondblClickRow事件

1. rowid：行的唯一标识符。

2. iRow：行的索引，它与rowid不同，不要混淆。

3. iCol：被点击的列的索引。

4. e：包含事件详细信息的对象。

二、onHeaderClick事件

三、onPaging事件

四、onRightClickRow事件

五、onSelectAll事件

1. aRowids：一个包含选定行ID的数组，表示哪些行的复选框与头复选框状态相同。

2. status：表示头复选框的选定状态的布尔值，如果选中则为true，否则为false。

六、onSelectRow事件

1. rowid：被点击的行的唯一标识符。

2. status：表示行的选择状态，当multiselect为true时有效。如果行被选中，则返回true；否则返回false。

七、onSortCol事件

当您点击列标题以进行排序时，会触发onSortCol事件。您将获得以下信息：

1. index：在colModel中定义的索引名。

2. iCol：被点击的列的索引号。

3. sortorder：新的排序方式，可以是asc（升序）或desc（降序）。

八、resizeStart和resizeS事件

当您重新调整列的宽度时，会先后触发resizeStart和resizeS事件。在resizeStart事件中，您将获得event对象和index信息，其中index是在colModel中定义的列索引。而在resizeS事件中，您将获得新的列宽度newwidth和同样的列索引index。

九、serializeGridData事件

方法

在当今的编程世界中，数据处理和展示是许多应用程序的核心功能之一。今天我们要的是一系列与数据操作相关的功能，它们可以在某些框架或库中得到实现，比如在前端开发中常用的jqGrid插件。这个插件提供了一系列强大的方法，用于向网格中添加、删除、清空数据等。下面我们来详细这些方法的功能和使用方式。

一、addJSONData方法

此方法用于向网格中添加JSON格式的数据。当你从Web服务器获取到JSON响应数据后，可以通过此方法来填充网格。例如，你可以先将响应文本转化为JavaScript对象，然后调用`addJSONData`方法将数据传输到网格中。在这个过程中，你可以对传输到`addJSONData`方法前的数据进行操作。这一方法的优点是，它允许你在数据传输前对其进行灵活的处理和修改。

二、addRowData方法

三、addXmlData方法

如果你获取的数据是XML格式的，可以使用此方法将数据填充到网格中。与`addJSONData`方法类似，你可以在传输数据到`addXmlData`方法前对数据进行操作。这一方法专为处理XML格式的数据而设计，确保数据的正确展示和。

四、clearGridData方法

此方法用于清除网格中当前装载的数据。如果你希望同时清除网格的表头数据，可以在调用此方法时传入一个额外的参数。这一方法非常有用，当你需要重置网格数据到初始状态时，可以调用此方法来实现。

五、delRowData方法

此方法用于删除指定ID的行数据。需要注意的是，这只会删除网格中的数据，而不会影响到服务器上的数据。这一方法对于管理动态数据非常有用，允许你根据需求删除特定的行数据。

六、footerData方法

此方法用于获取或设置网格底部的数据。你可以通过设置action参数来决定是获取还是设置数据。当action设置为get时，此方法将从底部返回一个包含名称和值的对象；当设置为set时，你可以将一个包含数据的数组设置到底部。这一方法为在网格底部展示汇总或统计信息提供了方便。

以上就是jqGrid插件中常用的一些方法的。这些方法的灵活性和易用性使得在前端开发中处理数据变得非常简单和高效。无论是处理JSON、XML格式的数据，还是进行数据的添加、删除和清空操作，这些方法都能满足你的需求，并帮助你构建出功能强大的应用程序。在数据世界的海洋中，有一款强大的工具，它被称为jqGrid。这个工具允许我们管理和操作数据，如同在操控自己的数据宫殿。以下是jqGrid的一些核心方法和功能的生动描述。

接下来是一些主要方法的详解：

format: 这个参数决定了数据展示的格式。当我们在处理数据时，数据的格式非常重要。通过format，我们可以更好地组织和展示数据。当我们在处理formatter时，如果colModel中已经定义了格式，那么设置format为true就可以应用这个格式。如果我们不希望使用任何格式，那么设置format为false即可。

getCell: 这个方法允许我们获取特定行和列的内容。如果我们在编辑行或列的时候尝试使用这个方法，它将返回原始值而不是当前值。这对于理解数据流程和控制数据非常重要。

getCol: 这个方法返回一个列值数组，我们可以根据列名获取数据。这个数组可以包含简单的值，也可以包含带有id和值的对象。我们还可以进行一些数学运算，如求和、求平均值和计数等。

getDataIDs: 这个方法返回当前网格显示数据的ID数组。这对于理解当前显示的数据集非常有帮助。

getGridParam: 通过这个方法，我们可以获取jqGrid的各种参数。这对于理解和调整jqGrid的行为非常有用。

getInd: 这个方法允许我们获取特定行的索引或整行内容。如果我们试图查找的行不存在，它将返回false。这对于定位和处理数据非常有帮助。

getLocalRow: 当数据类型为本地时，这个方法从存储在本地的数组中返回行数据。这对于本地数据处理非常有用。

getRowData: 通过这个方法，我们可以获取特定行的数据数组，这个数组包含了列名和对应的值。这对于理解行的内容非常有帮助。在编辑行或列时，它返回的是原始值而不是当前值。如果我们尝试获取不存在的行，它将返回一个空数组。

remapColumns: 这个方法允许我们重新排列列的显示顺序。这对于改变数据的展示方式非常有用。我们可以通过指定新的顺序来调整列的显示位置，还可以选择是否更新单元格和保持表头不变。

resetSelection: 这个方法用于选择或取消选择行，这对于多选模式下的操作非常有用。

在数据展示和处理领域，jqGrid作为一种强大的网格插件，提供了丰富的功能和灵活的API接口，用于处理各种数据展示需求。以下是关于jqGrid的一些核心方法和功能的介绍。

一、概述

jqGrid插件允许开发者通过简单的API调用，实现复杂的数据展示和操作功能。它支持多种数据类型，包括本地数据、XML、JSON等，并提供了丰富的配置选项和事件处理机制。

二、核心方法介绍

1. setGridParam：这是一个设置jqGrid对象特定参数的方法。通过传递一个包含名称和值对的选项数组，可以动态地调整网格的各种属性。有些参数需要在调用“reloadGrid”事件后才能生效。此方法可以覆盖其他事件。

2. setGridHeight和setGridWidth：这两个方法用于动态设置网格的高度和宽度。setGridHeight接收一个参数new_height，可以是像素值、百分比或auto，用于设置网格的高度。而setGridWidth接收两个参数：new_width表示新的宽度像素值，shrink是一个布尔值，表示是否启用类似于shrinkToFit的功能。

3. setLabel：此方法用于设置指定列的标题文字、属性和类。开发者可以通过传递列名（colname）、标题文字（data）、类名（class）和属性（properties）等参数，来定制列的显示方式和样式。

4. setRowData：用于更新指定行的数据。通过传递行ID（rowid）、数据（data）和CSS属性（cssprop）等参数，可以方便地修改行的内容和样式。

5. setSelection：用于选择或反选指定行。通过传递行ID（rowid）和事件处理函数（onselectrow），可以选择指定的行并触发相应的事件。

6. showCol：用于显示指定的列。通过传递列名或列名数组，可以动态地控制哪些列在网格中可见。

7. trigger("reloadGrid")：此方法用于重新加载网格数据。当数据类型为xml或json时，它将从服务器重新请求数据。这个方法适用于已经建立好的网格，并且不会改变表头信息。

jqGrid作为一种功能强大的数据展示插件，提供了丰富的API接口和配置选项，方便开发者实现各种复杂的数据展示和操作需求。以上介绍的核心方法只是jqGrid的一部分功能，它还有许多其他方法和事件等待开发者去和发现。通过合理使用这些方法，可以实现更加灵活、高效的数据展示和处理功能。四、问题记录与解决方案

问题一：IE9下jQgrid出现水平滚动条问题

背景描述：

在使用jqGrid插件时，在Internet Explorer 9浏览器下，可能会遇到一个常见的问题，那就是页面始终显示一个水平滚动条，这可能是由于jqGrid在IE下的border和padding设置导致的宽度过大引起的。

解决方案：

尝试以下方法可以解决此问题：

1. 设置 `cellLayout: 0`。这样可以确保在单元格布局时不会额外增加不必要的空间。

2. 调整CSS样式。在ui.jqgrid.css中添加以下样式规则：`.ui-jqgrid .ui-jqgrid-bdiv { overflow-x: hidden; }`。这将确保在jqGrid的主体部分不会显示水平滚动条。

3. 如果上述方法仍然无效，可以尝试使用jQuery代码来直接修改样式。例如，使用代码 `$(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-x': 'hidden' });`。

注意事项：

如果上述方法仍然不能解决问题，建议检查其他可能的CSS样式冲突或浏览器特定的渲染问题。

问题二：自定义操作列的限制

背景描述：

在使用jqGrid插件时，默认的自定义编辑列可能只包括编辑按钮和删除按钮，这在一定程度上限制了用户操作的灵活性。

解决方案或建议：

为了解决这个问题，可以考虑以下方法：

1. 扩展jqGrid的功能。可以使用jqGrid的扩展功能或插件来添加更多的自定义操作列，例如添加排序、筛选或自定义命令按钮等。

2. 自定义列模板。通过创建自定义的列模板，可以更加灵活地定义每一列的显示内容和操作。

3. 使用JavaScript或jQuery代码来动态添加或修改列的操作。这样可以根据实际需求在运行时对列进行操作。

总结与展望：

在actions列的formations项中增加以下配置：

name: 'myac'，代表自定义操作的标识；

index: ''，表示该列的位置，可以根据需求设置；

width: 80，固定列宽为80像素；

sortable: false，表示该列不可排序；

resize: false，表示该列不可调整大小；

formatter: 'actions'，表示使用actions格式器进行格式化；

在formations属性中，你可以进一步定制你的操作列：

keys: true，允许使用快捷键操作；

delbutton: false，不显示删除按钮；

delOptions：定义了删除操作的参数，如recreateForm和beforeShowForm，其中beforeDeleteCallback是删除前的回调函数；

formatter:"actionFormatter"，表示使用自定义的actionFormatter函数进行格式化。

以上就是你所需要的全部操作，希望这些内容能对大家的学习有所帮助。也希望大家能够支持狼蚁SEO。

（以上内容仅为示例，实际使用时请根据具体需求和场景进行调整。）