`
a3mao
  • 浏览: 563440 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqGrid学习 -------------- 搜索

    博客分类:
  • Work
阅读更多
表格中所有的列都可以作为搜索条件。
所用到的语言包文件
$.jgrid = {
...
   search : {
     caption: "Search...",
     Find: "Find",
     Reset: "Reset",
     odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
     groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],
     matchText: " match",
     rulesText: " rules"
   },
...



colModel 设置
可选参数类型说明默认值
searchboolean是否是搜索列true
stypestring搜索类型,text类型或者select类型text
searchoptionsobject对搜索条件进行一些设置


searchoptions 参数
属性类型说明
dataUrlstring只有当搜索类型为select才起效
buildSelectfunction只有当dataUrl设置时此参数才起效,通过一个function来构建下拉框
dataInitfunction初始化时调用,用法:dataInit: function(elem) {do something}通常用在日期的选择上. Example:dataInit : function (elem) {$(elem).datepicker();}
dataEventsarray事件列表,用法:dataEvents: [{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},{ type: 'keypress', fn: function(e) { console.log('keypress'); } }]
attrobject设置属性值。attr : { title: “Some title” }
searchhiddenboolean默认情况下,隐藏值不是搜索列。为了使隐藏值可以作为搜索列则将此设为true
soptarray此参数只用到单列搜索上,说明搜索条件。可用值:['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']意思为['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']
defaultValuestring默认值
valuemixed只用在搜索类型为select下。可以是string或者object,如果为string则格式为value:label,且以“;”结尾;如果为object格式为editoptions:{value:{1:'One';2:'Two'}}


colModel用法:
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, search:true, stype:'text', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} },
      ...
   ]
...
});
datePick = function(elem)
{
   jQuery(elem).datepicker();
}
</script>


需要说明的:
所有的搜索都是使用url来到服务器端查询数据。
当执行搜索时会用查询数据填充postData array
发送到服务器端搜索字符串的名称为_search
当点击刷新按钮时不会使用搜索条件
每个搜索方法都有自己的数据清空方法
分享到:
评论

相关推荐

    jqGrid学习笔记1 - - - - jqGrid英语PDF文档

    这个学习笔记主要围绕“jqGrid学习笔记1”展开,内容来源于jqGrid的英文PDF文档,结合了源码解析和实用工具的介绍。 首先,jqGrid支持多种数据源,包括JSON、XML、HTML、CSV等,这使得它能灵活地与各种后端服务进行...

    jqGrid-master

    这些示例对于初学者来说非常有用,可以快速理解和学习如何应用jqGrid。 3. **文档**:可能还会有详细的API文档和用户手册,帮助开发者了解jqGrid的所有功能和选项。通过阅读文档,你可以了解如何设置列定义、数据...

    jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar

    jqGrid的API允许开发者灵活地控制表格的行为,例如通过编程方式触发分页、排序或搜索操作。此外,它支持JSON、XML、CSV等多种数据格式,方便与后端数据源集成。jqGrid的模板系统允许自定义行、列和单元格的样式,...

    jqGrid-3.5.alfa-2

    通过这些示例文件,开发者不仅可以学习到jqGrid的基本使用,还能了解到如何根据实际需求进行功能扩展和性能优化。对于需要在网页上处理复杂数据展示和交互的项目,jqGrid是一个非常实用的工具。

    jquery最好的插件jqGrid-3.4.2 学习资源

    这个学习资源包含了所有必要的组件,帮助开发者深入了解和掌握jqGrid的强大功能。 首先,`jquery.js`是jQuery的核心库,它是jqGrid运行的基础。jQuery提供了一种简洁的方式来操作DOM、处理事件、执行异步请求,以及...

    free-jqgrid-4.15.5.tgz

    本文将深入探讨free-jqgrid-4.15.5版本,此版本包含了所有的js和css文件,为开发者提供了完整的jqGrid学习和应用资源。 一、jqGrid概述 jqGrid是一款基于jQuery的开源数据网格组件,它允许用户在网页上创建交互式...

    jquery.jqGrid-4.6.0

    对于开发者来说,这是一个宝贵的学习资源,可以深入理解内部工作原理,或者根据需要进行定制和扩展。 jqGrid 4.6.0版本中的主要特性包括: 1. **数据处理**:支持本地数据和远程数据源(如Ajax),可以轻松地从...

    jQgrid demo

    通过分析和运行这个 demo,你可以学习如何配置和定制 jQGrid,以适应你的项目需求。例如,你可以看到如何设置数据源、定义列模型、启用分页和搜索功能,以及如何处理编辑和保存操作。这将帮助你快速上手 jQGrid,并...

    jqgrid +bootstrap4.0 直接使用

    通过深入研究这个示例,开发者可以学习到如何自定义列、设置数据操作、使用过滤和排序功能,以及如何将 jqGrid 与后端服务器进行通信。对于希望提升网页数据展示和管理能力的开发者而言,这是一个宝贵的资源。

    jquery.jqGrid-4.6.0.zip

    而"jquery.jqGrid.src.js"则是未压缩的源码,方便开发者进行调试和学习。 "plugins"目录包含了jqGrid的可扩展功能插件。这些插件进一步增强了jqGrid的能力,如分页、排序、搜索、编辑等。例如,"treegrid"插件允许...

    jqGrid5.5 版本

    jqGrid是一款功能强大的JavaScript数据网格...学习jqGrid5.5不仅可以提高数据展示和管理的效率,还能提升开发者的前端技能。通过深入理解和实践,开发者可以充分利用jqGrid的强大功能,为用户带来更优质的交互体验。

    Guriddo_jqGrid_JS_5.4.0-Trial.zip

    6. **学习和应用**:对于初学者,可以通过官方文档和示例代码学习如何使用jqGrid。对于开发者,可以结合其他前端框架(如Bootstrap)和后端技术(如PHP、ASP.NET、Node.js等)构建完整的Web应用。 总之,Guriddo_...

    jqGrid 4.4.1

    - `docs`: 官方文档,帮助开发者了解和学习如何使用jqGrid。 - `src`: jqGrid的源代码,方便开发者查看和定制。 通过以上内容,我们可以看到jqGrid 4.4.1是一个功能强大的表格插件,提供了全面的数据管理和展示功能...

    MVC4网站中集成jqGrid表格插件-示例源代码.zip

    通过查看这个示例,你可以学习如何在实际项目中将jqGrid与MVC4结合使用,实现数据的动态加载、分页、排序和过滤功能。 总之,jqGrid在ASP.NET MVC4中的集成能够极大地提升Web应用的数据展示能力,使用户可以方便地...

    jqgrid_doc

    3. **搜索与过滤**:jqGrid提供了多种搜索和过滤选项,包括基本搜索、高级搜索和自定义过滤器,让用户快速定位所需信息。 4. **行编辑与增删**:用户可以直接在网格中编辑单元格,同时支持行的添加、删除和更新操作...

    jqGrid 3.6 中文

    jqGrid 是一个非常著名的...在使用jqGrid 3.6中文版时,开发者应考虑其特点和限制,并结合提供的示例文件来学习和应用。对于更复杂的需求,可能需要查阅官方文档或升级到更现代的版本以利用更多的功能和优化。

    jqGrid demo (完整版)

    jqGrid 提供了丰富的功能,包括分页、排序、搜索、编辑、添加、删除和导出数据等。它支持 JSON、XML 和 HTML 数据格式,并且可以通过 AJAX 进行异步通信,使得网页无需刷新就能动态更新数据。 2. **PHP 与 jqGrid ...

    jqGrid 3.5源码+DEMO+DOC

    示例代码(DEMO)是学习和理解jqGrid功能的关键,它们展示了如何实际应用jqGrid的各种特性。通过查看和运行DEMO,开发者能够快速上手,了解如何配置和使用jqGrid。 5. **DOC文档的价值** 提供的3.4版本DOC文档...

    jqGrid3.6中文文档

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页中展示和操作表格数据。它遵循 B/S(浏览器/服务器)架构,服务器负责数据...通过深入学习和实践,开发者可以利用 jqGrid 构建出高效、美观的数据展示和管理界面。

    jqGrid demo

    总的来说,"jqGrid demo"提供了一个全面了解和学习jqGrid的平台,无论你是初学者还是有经验的开发者,都能从中受益。通过深入研究这些文件和示例,你可以熟练地将jqGrid集成到你的Web应用中,创建功能强大的数据管理...

Global site tag (gtag.js) - Google Analytics