首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在jqgrid上实现搜索?

在jqGrid中实现搜索功能,可以使用jqGrid的内置搜索功能,也可以使用自定义搜索功能。以下是两种方法的详细说明:

方法一:使用jqGrid内置搜索功能

jqGrid提供了内置的搜索功能,可以通过以下步骤实现搜索功能:

  1. 在jqGrid初始化时,设置search选项为true,以启用搜索功能。
  2. 在需要搜索的列上设置searchoptions选项,以定义搜索选项。
  3. 在需要搜索的列上设置stype选项,以定义搜索类型。
  4. 调用jQuery("#grid_id").jqGrid('filterGrid', postdata, refresh)方法来执行搜索。

以下是一个示例代码:

代码语言:javascript
复制
jQuery("#grid_id").jqGrid({
    url: 'mydata.json',
    datatype: 'json',
    colNames: ['Column 1', 'Column 2', 'Column 3'],
    colModel: [
        { name: 'col1', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, stype: 'text' },
        { name: 'col2', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, stype: 'text' },
        { name: 'col3', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, stype: 'text' }
    ],
    search: true,
    pager: '#pager'
});

jQuery("#grid_id").jqGrid('navGrid', '#pager', { search: true });

function searchGrid() {
    var postdata = jQuery("#grid_id").jqGrid('getGridParam', 'postData');
    jQuery("#grid_id").jqGrid('setGridParam', { search: true });
    jQuery("#grid_id").jqGrid('filterGrid', postdata, refresh);
}

方法二:使用自定义搜索功能

如果内置搜索功能不能满足需求,可以使用自定义搜索功能。以下是一个示例代码:

代码语言:javascript
复制
jQuery("#grid_id").jqGrid({
    url: 'mydata.json',
    datatype: 'json',
    colNames: ['Column 1', 'Column 2', 'Column 3'],
    colModel: [
        { name: 'col1', search: true },
        { name: 'col2', search: true },
        { name: 'col3', search: true }
    ],
    pager: '#pager'
});

jQuery("#search_button").click(function() {
    var search_col1 = jQuery("#search_col1").val();
    var search_col2 = jQuery("#search_col2").val();
    var search_col3 = jQuery("#search_col3").val();

    var postdata = jQuery("#grid_id").jqGrid('getGridParam', 'postData');
    postdata.filters = '{"groupOp":"AND","rules":[';

    if (search_col1) {
        postdata.filters += '{"field":"col1","op":"cn","data":"' + search_col1 + '"},';
    }

    if (search_col2) {
        postdata.filters += '{"field":"col2","op":"cn","data":"' + search_col2 + '"},';
    }

    if (search_col3) {
        postdata.filters += '{"field":"col3","op":"cn","data":"' + search_col3 + '"},';
    }

    postdata.filters = postdata.filters.slice(0, -1) + ']}';

    jQuery("#grid_id").jqGrid('setGridParam', { search: true, postData: postdata });
    jQuery("#grid_id").jqGrid('filterGrid', postdata, refresh);
});

在这个示例中,我们创建了一个搜索表单,包含三个搜索框,每个搜索框对应一个列。当用户点击搜索按钮时,我们使用jqGrid('getGridParam', 'postData')方法获取当前jqGrid的postData对象,然后根据搜索表单中的值设置filters属性,最后调用jqGrid('setGridParam', { search: true, postData: postdata })jqGrid('filterGrid', postdata, refresh)方法来执行搜索。

以上是在jqGrid上实现搜索的两种方法,可以根据具体需求选择合适的方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在Ubuntu 16.04使用MySQL全文搜索提高搜索效果

介绍 全文搜索(FTS)是搜索引擎用于在数据库中查找结果的技术。您可以使用它来为商店、搜索引擎、报纸等网站上的搜索结果提供支持。 更具体地说,FTS检索与搜索条件不完全匹配的文档。...从技术讲,像MySQL这样的数据库管理系统(DBMS)通常允许使用LIKE子句进行部分文本查找。但是,这些请求往往在大型数据集上表现不佳。...使用FTS,您可以构建更强大的文本搜索引擎,而无需在更高级的工具引入额外的依赖关系。...在本教程中,您将使用MySQL 5.6使用全文搜索来查询数据库,然后根据它们与搜索输入的相关性来量化结果,并仅显示最佳匹配。...在搜索具有不同词汇表的非常大的文档时,通过搜索词之间的距离限制搜索结果会很有帮助。查询术语之间的差距越小,结果就越准确,尽管微调距离将取决于您正在使用的文档集。

2.4K40

何在 Linux 使用 `find` 和 `locate` 进行文件搜索

在 Linux 系统,当我们需要查找特定的文件或目录时,使用强大的搜索工具是非常重要的。find 和 locate 是两个常用的命令,它们提供了在 Linux 系统中进行文件搜索和定位的功能。...本文将详细介绍如何使用 find 和 locate 命令来搜索文件。图片find 命令find 命令是一个强大的文件搜索工具,可以根据不同的条件来查找文件。...你还可以使用 -atime(访问时间)和 -ctime(状态改变时间)选项来根据不同的时间戳进行搜索。组合条件搜索:find 命令还允许你组合多个条件进行更复杂的搜索。...注意:locate 命令不会搜索子目录,而是通过快速查询数据库来定位文件。使用通配符搜索:locate 命令支持使用通配符来进行模糊搜索。...结论find 和 locate 是在 Linux 系统中进行文件搜索和定位的两个常用命令。find 提供了更灵活的搜索功能,可以根据文件名、类型、大小和时间戳等条件来搜索文件。

27600
  • 何在 Canvas 实现图形拾取?

    维护节点树 canvas 只提供 API 在画布绘制形状,并不知道它之前画过的图形是什么,不会保存它们的坐标、宽高等信息。...每次我们在主 canvas 绘制形状时,也在缓存 canvas 绘制同样形状的纯色块,并用哈希表记录颜色和对应的图形对象,比如红色表示矩形 A,绿色表示矩形 B。...优点: 某种意义是 isPointInPath 的底层实现,能做到平台无关; 缺点: 和 isPointInPath 方案一样,需要遍历图形检测; 实现复杂,简单图形还算简单,但如果涉及到贝塞尔曲线等复杂形状...,实现就会很复杂且性能堪忧(可以考虑用 isPointInPath); 如果使用了 transform,因为要进行矩阵乘法,性能会有所下降。...但复杂图形碰撞检测实现起来困难。 我是前端西瓜哥,欢迎关注我,学习更多知识。 ----

    1.2K30

    「原生案例」如何在JavaScript中实现实时搜索功能

    这种互动性节省了用户宝贵的时间和精力,从而实现了更高效和令人满意的搜索体验。 更快的信息检索:通过实时搜索,用户可以快速找到所需的信息,无需浏览多个页面或等待搜索结果加载。...这种增加的参与度可以提高转化率,因为用户更有可能进一步探索网站并将他们的搜索意图转化为行动。 增强的过滤和细化功能:实时搜索功能通常包括额外的功能,过滤器、建议和自动完成选项。...设置HTML结构 既然我们已经完全了解了实时搜索功能以及它的重要性,那么让我们深入探讨一下如何在您自己的项目中实现这个功能。 首先,让我们建立项目的结构。...通过缓存提高搜索性能 在使用API实现实时搜索功能时,提高性能的一种有效技术是缓存。缓存涉及存储先前获取的搜索结果,并在再次请求相同的搜索查询时重复使用它们。...我们已经完成了我们的小电影应用程序中展示实时搜索功能的所有特性的实现

    1.2K40

    何在浏览器实现一个terminal

    这不,现在都流行云服务器了,在浏览器运行个 terminal 简直成了程序员的日常。无论走到哪,打开浏览器的 terminal,中断的现场立刻复现,你可以快速进入编码状态。...可以想象,浏览器运行的东西只会越来越多,云文档,云端 IDE 正在流行起来。...Jupyter 的 terminal 我研究了下,实现原理就是 websocket,xterm.js,如果需要将这个 terminal 嵌入到自己的网站项目中,还是要深入研究下,最好自己动手实现一个,使用...虽然实现了将服务器执行长命令的输出结果持续推送至浏览器,但没有实现terminal 的窗口特效,要实现这个,需要使用 xterm.js (https://github.com/xtermjs/xterm.js...如果你也想把 terminal 搬到浏览器,学习这个项目就足够了。

    1.9K10

    加速 AI 训练,如何在实现灵活的弹性吞吐

    如何平稳地搬家,以及如何在不影响线上业务的情况下避免事故,都是一项复杂的任务。仅仅靠自动机制很难完成好,因为业务负载的情况是难以预知的,通常要老司机手动挡干预。...性能不足引发的存储扩容,造成存储空间闲置 为了实现增加性能,需要将三角的数据迁移到新的硬盘上,就是图上没有标红的硬盘。 为什么这个问题在量化私募行业特别明显呢?...因此,对于这类会产生热点数据的场景,即对计算的弹性要求更加极致时,匹配性能可伸缩的存储,可以更好地实现整体的性能和成本得到的平衡。...4.JuiceFS 如何实现性能扩展 & 性价比 在2017年,当我们开始研发 JuiceFS 时就决定要为云环境设计。...JuiceFS 企业版架构图 在这张图中,三个虚线框代表了文件系统的三个核心组件,元数据引擎、数据引擎和客户端,它们一起实现了文件系统的关键功能。

    47730

    何在购物 App 实现商品快递物流信息的展示

    那么我们如何在购物App展示商品的物流信息呢?本文教你如何将快递物流查询功能嵌入购物App中~如何实现?选择快递物流查询接口:首先,选择一个可靠的快递物流查询接口供应商。...接收到响应后,解析并处理返回的物流数据,并在App界面中显示相关的物流信息,物流状态、运输进度、预计送达时间等。...错误处理和异常情况:处理接口请求的错误和异常情况,网络连接失败、无法解析返回数据等。在这些情况下,可以向用户显示错误信息,并提供重新尝试或联系客服的选项。...Response response = client.newCall(request).execute();System.out.println(response.body().string());写在最后了解了如何在购物...APP实现商品快递物流的展示,那么之后也就知道了如何将快递物流查询的功能嵌入到各种含有购物功能的应用中。

    24600

    何在直播系统实现一对一聊天?

    一对一聊天平台我们可以在应用商店里看到很多,他们都属于一对一聊天系统的范畴,其大部分建立在直播系统,它们功能各异,各有各的产品定位及运营特色。那么其核心功能是如何实现的呢?...常见的一对一聊天功能的实现方式有以下几种: 一、采用密码房间 这种方式类似于现在很多直播平台上的密码房间功能,通过在开播前设置房间的密码,只允许一位知晓密码的粉丝用户进入直播间,实现一对一聊天。...当然这种方式仅仅在理论可行,但实际体验效果就不一定很理想了。试想,房间密码很容易就被透露出去,到时候大量的用户涌入直播间,“一对一”就变成了“一对多”。...通过这种方式去实现一对一聊天不仅保证了视频通话聊天的质量,而且携带了直播平台的收益模式。...对比三种不同的一对一聊天系统实现方式,更推荐最后一种。

    1.8K60

    何在Ubuntu 14.04使用Iptables实现基本防火墙模板

    本指南假定您未在服务器主动使用IPv6。如果您的服务不利用IPv6,那么完全阻止访问会更安全,正如我们将在本文中所做的那样。...然后,我们将解释一般策略,并向您展示如何使用iptables命令而不是修改文件来实现这些规则。...为了实现我们的防火墙策略和框架,我们将编辑/etc/iptables/rules.v4和/etc/iptables/rules.v6文件。...(可选)更新名称服务器 阻止所有IPv6流量可能会干扰服务器如何解析Internet的内容。例如,这可能会影响您使用APT的方式。...使用IPTables命令实现我们的防火墙 现在您了解了我们构建的策略背后的一般概念,我们将介绍如何使用iptables命令创建这些规则。

    1.2K00

    开发 | 类似淘宝的搜索及购物车功能,如何在小程序中实现

    今天,我们依然将以「北江纺织牛仔新时尚」为例,复盘订单收集类小程序的主要功能点是如何通过知晓云(cloud.minapp.com)实现的,主要涉及搜索和购物车这 2 个功能。...看上去有点复杂,那么我们先简化一下,如何搜索童装牛仔长裤的信息? 首先,我们需要有这样一张数据表,存储了商品的信息,也就是一篇中我们讲过的 product 表。...回到之前那个更复杂的问题,搜索一个裤型修身的、水洗颜色浅色的、成分全棉的童装牛仔长裤,其实就是往数据表分别加上裤型、水洗颜色、成分的相关字段,然后在小程序端使用组合查询去把这些查询条件合并起来。...点击购物车,我们就会跳转到购物车页,可以选择下单,那么这个购物车功能是怎么实现的呢? ?...好了,购物车功能的实现思路基本就是如此,可能没有搜索功能讲的那么详细,但是关键点仍然是在搜索功能中所说的,如何根据业务需求去设计合适的数据表和表结构,完成相应业务,这个需要不断的实践和累积经验去完善了

    1.7K30

    【实战】手把手教你使用 Elasticsearch 实现海量级数据搜索

    一、简介 Elasticsearch(简称ES)是一个基于Apache Lucene™的开源搜索引擎,无论在开源还是专有领域,Lucene 可以被认为是迄今为止最先进、性能最好的、功能最全的搜索引擎库。...官方的解释如下:Elasticsearch(简称ES)是一个基于 Apache Lucene™ 的开源搜索引擎,它提供了一个基于 RESTful web 接口的分布式多用户能力的全文搜索引擎,能够达到实时搜索...Elasticsearch 的底层数据存储和搜索,是基于 Lucene 进行开发的,那 Lucene 又是啥呢? Lucene 是 java 领域迄今为止最先进、性能最好的、功能最全的搜索引擎库。...4.4、创建类型 如果我们想要在索引下创建类型,可以通过如下方式实现。...} } ] } } } 4.12、查询文档-多条件查询 - 大于/小于 如果需要多个条件组合查询,可以通过bool配置实现

    3.1K20

    本体技术视点 | 如何在区块链实现数据等资源的交换?(二)

    前情提要:本体技术视点 | 如何在区块链实现数据等资源的交换?...平台可以是个通用性平台,能实现多种资源的流转;它可以是一个特定资源的通用交换平台,精细化地实现某种特定资源的流转。 资源流转可以是资源易 ONG、OEP-4代币等的形式,也可以是以资源易资源的形式。...链下仲裁者或者其代理人(例如:交易市场)将纠纷裁定结果链。链下仲裁者不处理链纠纷,链纠纷将直接通过链上证明裁定。...可多次交付的资源可以在不同的MP以不同的方式进行交易,某份数据的使用权可以在多个交易市场进行交易。假定用户,包括RP、RC 以及 OJ 等,都已经根据该MP的相应要求进行了KYC。...资源准备 1)资源链注册:RP 针对将要发布的资源在链注册一个 ONT ID 以及生成相应的 ONT ID Document 信息,作为资源在链的映射; 2)资源认证(可选):RP 从 RA 处取得对准备发布资源的认证

    73310

    一文读懂如何在 Kubernetes 轻松实现自动化部署 Prometheus

    目前大多数的服务都有现成的 exporter,我们不需要重复造轮子,拿来用即可, MySQL,MongoDB 等,可以参考这里。...Alert Manager 是 Prometheus 的报警组件,当 Prometheus 服务端发现报警时,推送 alert 到 Alert Manager,再由 Alert Manager 发送到通知端,...部署这块 Prometheus Operator 已经帮我们做的非常好了,我们只需要调整一些参数即可实现部署。我们使用 helm 来部署 Prometheus,只需要一个命令。...release: influxdb # 选择命名空间 namespaceSelector: matchNames: - monitoring # 定义抓取的配置,端口...以上的操作还是手动化的,如果要全自动化的话,可以参考我的项目,定义好配置文件,写好自动化脚本,接入 CI/CD 工作流,即可让监控系统实现自动部署、自动配置。

    1.7K20
    领券