定义自己的查询
<div id="mysearch"></div>
JS中使用
jQuery("#mysearch").filterGrid('#grid_id',options);
grid_id:表格id
options:参数
参数 | 描述 | 默认值 |
gridModel | 当为ture我们会使用colModel中的属性构造查询条件,所用到的参数:name, index, edittype, editoptions, search.还有一个参数:defval:查询条件的默认值;surl:当edittype:'select'时获取select数据的url,格式:<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select> | false |
gridNames | gridModel为true时起效,设置查询列的名称 | false |
filterModel | gridModel为false时起效,格式:{label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}}。label:字段显示名称;name:列名;stype:输入框类型,text或者select;surl:获取select数据的地址,要求的内容为html格式:<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select>;sopt:同editoptions | [] |
formtype | 定义表单如何被构造,'horizontal' or 'vertical' | horizontal |
autosearch | 如果为true:当点击回车键触发查询;当select值变化时触发查询 | true |
formclass | 可以使用的css | filterform |
tableclass | 可以使用到table上的css | filtertable |
buttonclass | 按钮上使用的css | filterbutton |
searchButton | 搜索按钮 | Search |
clearButton | 清空数据的按钮 | Clear |
enableSearch | 启用禁用搜索按钮 | false |
enableClear | 启用禁用清空按钮 | false |
beforeSearch | 搜索之前触发的事件 | null |
afterSearch | 搜索完成之后触发的事件 | null |
beforeClear | 清空数据之前触发的事件 | null |
afterClear | 清空数据之后触发事件 | null |
url | 搜索数据的url | ‘’ |
marksearched | 当为true时,每次查询之后所有查询的列都标记为可查询列 | true |
查询用到的方法:
var sg = jQuery("#mysearch").filterGrid(...)[0];
sg.triggerSearch();
sg.clearSearch();
分享到:
相关推荐
这个学习笔记主要围绕“jqGrid学习笔记1”展开,内容来源于jqGrid的英文PDF文档,结合了源码解析和实用工具的介绍。 首先,jqGrid支持多种数据源,包括JSON、XML、HTML、CSV等,这使得它能灵活地与各种后端服务进行...
这些示例对于初学者来说非常有用,可以快速理解和学习如何应用jqGrid。 3. **文档**:可能还会有详细的API文档和用户手册,帮助开发者了解jqGrid的所有功能和选项。通过阅读文档,你可以了解如何设置列定义、数据...
jqGrid的API允许开发者灵活地控制表格的行为,例如通过编程方式触发分页、排序或搜索操作。此外,它支持JSON、XML、CSV等多种数据格式,方便与后端数据源集成。jqGrid的模板系统允许自定义行、列和单元格的样式,...
6. **searching.html**:展示jqGrid的高级搜索功能,包括简单的文本搜索、多字段搜索、自定义搜索条件等。 7. **getex.html**:可能涉及到获取表格数据的示例,比如如何获取当前选中的行数据,或者获取整个表格的...
这个学习资源包含了所有必要的组件,帮助开发者深入了解和掌握jqGrid的强大功能。 首先,`jquery.js`是jQuery的核心库,它是jqGrid运行的基础。jQuery提供了一种简洁的方式来操作DOM、处理事件、执行异步请求,以及...
本文将深入探讨free-jqgrid-4.15.5版本,此版本包含了所有的js和css文件,为开发者提供了完整的jqGrid学习和应用资源。 一、jqGrid概述 jqGrid是一款基于jQuery的开源数据网格组件,它允许用户在网页上创建交互式...
对于开发者来说,这是一个宝贵的学习资源,可以深入理解内部工作原理,或者根据需要进行定制和扩展。 jqGrid 4.6.0版本中的主要特性包括: 1. **数据处理**:支持本地数据和远程数据源(如Ajax),可以轻松地从...
4. **搜索/过滤**:jQGrid 提供多种搜索和过滤选项,包括基本的文本搜索、高级搜索和自定义过滤条件,方便用户快速定位所需信息。 5. **编辑功能**:对于需要在线编辑的数据,jQGrid 支持行内编辑、弹出式编辑和...
通过深入研究这个示例,开发者可以学习到如何自定义列、设置数据操作、使用过滤和排序功能,以及如何将 jqGrid 与后端服务器进行通信。对于希望提升网页数据展示和管理能力的开发者而言,这是一个宝贵的资源。
而"jquery.jqGrid.src.js"则是未压缩的源码,方便开发者进行调试和学习。 "plugins"目录包含了jqGrid的可扩展功能插件。这些插件进一步增强了jqGrid的能力,如分页、排序、搜索、编辑等。例如,"treegrid"插件允许...
jqGrid是一款功能强大的JavaScript数据网格...学习jqGrid5.5不仅可以提高数据展示和管理的效率,还能提升开发者的前端技能。通过深入理解和实践,开发者可以充分利用jqGrid的强大功能,为用户带来更优质的交互体验。
- `docs`: 官方文档,帮助开发者了解和学习如何使用jqGrid。 - `src`: jqGrid的源代码,方便开发者查看和定制。 通过以上内容,我们可以看到jqGrid 4.4.1是一个功能强大的表格插件,提供了全面的数据管理和展示功能...
6. **学习和应用**:对于初学者,可以通过官方文档和示例代码学习如何使用jqGrid。对于开发者,可以结合其他前端框架(如Bootstrap)和后端技术(如PHP、ASP.NET、Node.js等)构建完整的Web应用。 总之,Guriddo_...
3. **搜索与过滤**:jqGrid提供了多种搜索和过滤选项,包括基本搜索、高级搜索和自定义过滤器,让用户快速定位所需信息。 4. **行编辑与增删**:用户可以直接在网格中编辑单元格,同时支持行的添加、删除和更新操作...
示例代码(DEMO)是学习和理解jqGrid功能的关键,它们展示了如何实际应用jqGrid的各种特性。通过查看和运行DEMO,开发者能够快速上手,了解如何配置和使用jqGrid。 5. **DOC文档的价值** 提供的3.4版本DOC文档...
jqGrid 是一个非常著名的...在使用jqGrid 3.6中文版时,开发者应考虑其特点和限制,并结合提供的示例文件来学习和应用。对于更复杂的需求,可能需要查阅官方文档或升级到更现代的版本以利用更多的功能和优化。
开发者需要熟悉 JavaScript 和 jQuery 的基本语法,如选择器、事件处理、DOM 操作等,以便于自定义 jqGrid 的行为。 4. **jqGrid 配置** jqGrid 的功能可以通过配置选项进行定制。例如,可以设置列宽、标题、数据...
- 利用jqGrid的搜索和过滤功能,提高用户体验。 - 集成服务器端数据处理,如使用ASP.NET的数据访问层与jqGrid交互。 - 自定义jqGrid的样式和行为,实现个性化设计。 - 掌握jqGrid的事件处理机制,实现复杂的用户交互...
"Jqgrid之onSelectRow 和onCellSelect 事件不能一起用-yellowcong_yelllowcong的专栏-CSDN博客_files"和"jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)_web开发自学-CSDN博客_files"以及"jqgrid...
jqGrid 支持多种高级特性,如搜索、过滤、排序、分页、行选择、编辑和插入数据,甚至可以通过自定义事件处理程序进行扩展。 8. **服务器端交互**: jqGrid 使用 AJAX 进行数据的异步加载和提交。当用户进行排序、...