Jquery Jgrid使用手册

JqGrid是一款基于jQuery的表格插件，用于创建功能丰富的数据网格，提供了数据的展示、编辑、排序、分页和搜索等功能。在本文档中，我们将深入探讨JqGrid的各种配置选项、API、事件和方法，以帮助开发者充分利用这个强大的工具。 一、jqGrid学习 JqGrid的基础使用涉及到HTML元素的初始化，通常通过jQuery选择器选中表格元素，然后调用jqGrid函数进行初始化。配置参数可以设置表格的列、数据源、样式等特性。 二、jqGrid学习之——皮肤 JqGrid支持多种皮肤，如ui.jqgrid.css中的"ui-gray"、"ui-blue"等，可以通过更改CSS引用来改变表格的视觉风格。 三、jqGrid学习——jqGrid参数 JqGrid有众多可配置的参数，例如`url`用于指定数据来源，`datatype`定义数据类型（如'json', 'xml'等），`colNames`和`colModel`定义列的显示名称和属性，`pager`设置分页控件等。 四、jqGrid学习——ColModel API ColModel是JqGrid的核心配置之一，它定义了列的属性，包括宽度、对齐方式、可编辑性、搜索功能等。例如： ```javascript colModel: [ {name: 'id', index: 'id', width: 55, editable: false}, {name: 'name', index: 'name', width: 100, search: true} ] ``` 五、jqGrid学习——数据 JqGrid支持动态加载数据，可以通过`data`参数直接提供数据，或通过`url`从服务器获取数据。数据格式可以是JSON、XML或其他自定义格式。 六、jqGrid学习——事件 JqGrid提供了一系列事件处理函数，如`loadComplete`在数据加载完成后触发，`beforeSelectRow`在行被选中前触发，开发者可以利用这些事件进行自定义操作。 七、jqGrid学习——方法 JqGrid提供了一些内置方法，如`getGridParam`获取当前表格的配置参数，`setGridParam`用于修改配置参数，`reloadGrid`用于重新加载数据。 八、jqGrid学习——配置json 当使用JSON作为数据源时，需要按照特定格式提供数据，包括`total`, `page`, `records`和`rows`字段，其中`rows`包含实际的数据行。 九、jqGrid学习——翻页 JqGrid支持分页功能，通过`pager`参数设置分页控件，`rowList`定义每页显示的行数选项，`pgbuttons`和`pginput`控制分页按钮和输入框的显示。 十、jqGrid学习——自定义按钮 开发者可以通过`navGrid`方法添加自定义操作按钮，例如编辑、删除、查看等，同时可以定义按钮的点击事件。 十一、jqGrid学习——搜索 JqGrid的搜索功能允许用户根据列数据进行过滤，搜索条件通过`postData`传递到服务器。搜索方法如`searchGrid`，并有对应的清除搜索条件的方法，例如`clearToolbar`。 总结，JqGrid是一个功能强大且灵活的jQuery插件，适用于各种数据展示和管理需求。通过深入理解和熟练使用其配置参数、API、事件和方法，开发者能够构建出高效、美观的数据网格应用。在实际项目中，结合服务器端的数据处理，JqGrid能够提供出色的用户体验和数据管理能力。