当需要在jqGrid的搜索框里配置搜索条件时,如下拉,日期等,代码如下:

      datePick = function(elem)
{
jQuery(elem).datepicker();
}
         colNames  : [ "OP_ID", "OP_Module", "OP_Type", "OP_Content", "Operator", "OperatorType", "OP_Time", "OP_IP"],
colModel : [{name:'op_id', index:'op_id', width:100, align:'center', editable:false, search:false},
{name:'op_module', index:'op_module', width:110, align:'center', search:true, editable:false,
stype:'select', searchoptions: {dataUrl:'./select/module', sopt:['eq', 'ne']}},
{name:'op_type', index:'op_type', width:100, align:'center', search:true, editable:false,
stype:'select', searchoptions: {dataUrl:'./select/type', sopt:['eq', 'ne']}},
{name:'op_content', index:'op_content', width:250, align:'center', editable:false, sortable:false,
stype:'text', searchoptions: {sopt:['bw', 'bn', 'ew', 'en','cn', 'nc']}},
{name:'op_by', index:'op_by', width:100, align:'center', search:true, editable:false},
{name:'operator_type', index:'operator_type', width:130, search:true, align:'center', editable:false,
stype:'select', searchoptions: {dataUrl:'./select/operator_type', sopt:['eq', 'ne']}},
{name:'op_at', index:'op_at', width:170, align:'center', search:true, editable:false,
stype:'text', searchoptions: {dataInit:datePick, attr:{title:'Select Date'}, sopt:['cn', 'nc', 'in', 'ni']}, formatter:'date', formatoptions:{srcformat: 'Y-m-d H:i:s', newformat: 'm/d/Y H:i:s'}},
{name:'op_ip', index:'op_ip', width:100, align:'center', search:true, editable:false}
],

其中,colModel的属性的stype有“text”和“select”两种,需要下拉选项时,则选择“select”;同时,searchoptions也进行设置,dataUrl为请求路由,路由返回的数据是

<select><option>1</option></select>的格式;重要的是需设定:ajaxSelectOptions: {type: "GET"} ,其中type可以是Post,这样你的搜索才能返回数据。

     jQuery(grid_selector).jqGrid({
url : "./show_log",
datatype : "json",
mtype  : "post",
height  : 370,
width  : 1150,
ajaxSelectOptions : {type: "GET"} ,

而想显示日期选择框时,stype设定为“type”,searchoptions: {dataInit:datePick, attr:{title:'Select Date'}, sopt:['cn', 'nc', 'in', 'ni']},

formatter:'date', formatoptions:{srcformat: 'Y-m-d H:i:s', newformat: 'm/d/Y H:i:s'}}。其中,formatoptions可以自己设置需要的格式。

搜索框搜索时会向后台传递数据,字段为:filters,是一个数组,每个搜索条件对应着三个内容:'field','op',’data‘,如下:

  filters=[
    {field:'field1', op:'eq', data:'keyword1'},

{field:'field2', op:'ne', data:'keyword2'}

]

op=
eq=等于
ne=不等
lt=小于
le=小于等于
gt=大于
ge=大于等于
bw=开始于
bn=不开始于
in=在内
ni=不在内
ew=结束于
en=不结束于
cn=包含
nc=不包含 

jqGrid的搜索框下拉的更多相关文章

  1. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  2. typecho博客组插件:openSug.js百度搜索框下拉提示免费代码

      Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...

  3. C#用HttpClient抓取jd.com搜索框下拉数据

    添加System.Web.dll引用 添加System.Net.Http引用 using System.Net.Http; using System.Web; string key = "电 ...

  4. 自定义SWT控件三之搜索功能下拉框

    3.搜索功能下拉弹出框 package com.view.control.select; import java.util.ArrayList; import java.util.LinkedList ...

  5. easyui的combobox,自动搜索的下拉框

    作者:多来哈米 如图,输入关键字,左匹配检索 HTML代码 <input class="easyui-combobox" name="userId" id ...

  6. UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)

    弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...

  7. JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...

  8. ComboBox 自动调整组合框下拉部分的宽度

    /// <summary>        /// ComboBox 自动调整组合框下拉部分的宽度        /// </summary>        void Resiz ...

  9. kendo 级联加带搜索的下拉框以及js赋值

    1‘.js给下拉框赋值 $("#UserRole").data("kendoDropDownList").value(dataItem.RoleName); $ ...

随机推荐

  1. Spring Boot 系列教程12-EasyPoi导出Excel下载

    Java操作excel框架 Java Excel俗称jxl,可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件,现在基本没有更新了 http://jxl.sourcef ...

  2. CodeForces 429B Working out 动态规划

    Description Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to loo ...

  3. 解决TortoiseGit 推送 拉取需要密码的问题

    找到解决了方法: 1)运行PuTTYGen,在Conversions菜单中点击Import key,选择ssh-keygen生成的私钥文件所在位置,比如id_rsa文件. 2)点击Save priva ...

  4. dhcpv6开源软件配置

    ISC-dhcp server for IPv6 1.  下载源码:http://www.isc.org/software/dhcp 2.安装:最好以root身份安装,否则会permission de ...

  5. linux 显示文件或文件夹

    用 -v 很简单呀! 显示文件 ls -l | grep -v '^d'显示目录 ls -l | grep '^d'

  6. 《割绳子》《蜡笔物理学》《Contre Jour》《顽皮鳄鱼爱洗澡》等游戏用Box2D引擎实现物理部分的方法(转)

    从最热门游戏排行榜和flash游戏网站上,你能看到什么?许多2D游戏都有非常出色的物理学和美术设计.现在我们要学习那些游戏使用了什么物理学以及如何用Box2D制作它们. 除了知道是“什么”,更重要的是 ...

  7. spark中groupByKey与reducByKey

    [译]避免使用GroupByKey Scala Spark 技术   by:leotse 原文:Avoid GroupByKey 译文 让我们来看两个wordcount的例子,一个使用了reduceB ...

  8. hadoop工作流引擎之azkaban

    Azkaban是twitter出的一个任务调度系统,操作比Oozie要简单很多而且非常直观,提供的功能比较简单.Azkaban以Flow为执行单元进行定时调度,Flow就是预定义好的由一个或多个可存在 ...

  9. 转:selenium webdriver 执行javascript代码

    在用selenium webdriver 编写web页面的自动化测试代码时,可能需要执行一些javascript代码,selenium本身就支持执行js,我们在代码中import org.openqa ...

  10. redis 工具类 单个redis、JedisPool 及多个redis、shardedJedisPool与spring的集成配置

    http://www.cnblogs.com/edisonfeng/p/3571870.html http://javacrazyer.iteye.com/blog/1840161 http://ww ...