jqGrid的搜索框下拉
当需要在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‘,如下:
{field:'field2', op:'ne', data:'keyword2'}
jqGrid的搜索框下拉的更多相关文章
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- typecho博客组插件:openSug.js百度搜索框下拉提示免费代码
Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...
- C#用HttpClient抓取jd.com搜索框下拉数据
添加System.Web.dll引用 添加System.Net.Http引用 using System.Net.Http; using System.Web; string key = "电 ...
- 自定义SWT控件三之搜索功能下拉框
3.搜索功能下拉弹出框 package com.view.control.select; import java.util.ArrayList; import java.util.LinkedList ...
- easyui的combobox,自动搜索的下拉框
作者:多来哈米 如图,输入关键字,左匹配检索 HTML代码 <input class="easyui-combobox" name="userId" id ...
- UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)
弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...
- ComboBox 自动调整组合框下拉部分的宽度
/// <summary> /// ComboBox 自动调整组合框下拉部分的宽度 /// </summary> void Resiz ...
- kendo 级联加带搜索的下拉框以及js赋值
1‘.js给下拉框赋值 $("#UserRole").data("kendoDropDownList").value(dataItem.RoleName); $ ...
随机推荐
- Spring Boot 系列教程12-EasyPoi导出Excel下载
Java操作excel框架 Java Excel俗称jxl,可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件,现在基本没有更新了 http://jxl.sourcef ...
- CodeForces 429B Working out 动态规划
Description Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to loo ...
- 解决TortoiseGit 推送 拉取需要密码的问题
找到解决了方法: 1)运行PuTTYGen,在Conversions菜单中点击Import key,选择ssh-keygen生成的私钥文件所在位置,比如id_rsa文件. 2)点击Save priva ...
- dhcpv6开源软件配置
ISC-dhcp server for IPv6 1. 下载源码:http://www.isc.org/software/dhcp 2.安装:最好以root身份安装,否则会permission de ...
- linux 显示文件或文件夹
用 -v 很简单呀! 显示文件 ls -l | grep -v '^d'显示目录 ls -l | grep '^d'
- 《割绳子》《蜡笔物理学》《Contre Jour》《顽皮鳄鱼爱洗澡》等游戏用Box2D引擎实现物理部分的方法(转)
从最热门游戏排行榜和flash游戏网站上,你能看到什么?许多2D游戏都有非常出色的物理学和美术设计.现在我们要学习那些游戏使用了什么物理学以及如何用Box2D制作它们. 除了知道是“什么”,更重要的是 ...
- spark中groupByKey与reducByKey
[译]避免使用GroupByKey Scala Spark 技术 by:leotse 原文:Avoid GroupByKey 译文 让我们来看两个wordcount的例子,一个使用了reduceB ...
- hadoop工作流引擎之azkaban
Azkaban是twitter出的一个任务调度系统,操作比Oozie要简单很多而且非常直观,提供的功能比较简单.Azkaban以Flow为执行单元进行定时调度,Flow就是预定义好的由一个或多个可存在 ...
- 转:selenium webdriver 执行javascript代码
在用selenium webdriver 编写web页面的自动化测试代码时,可能需要执行一些javascript代码,selenium本身就支持执行js,我们在代码中import org.openqa ...
- redis 工具类 单个redis、JedisPool 及多个redis、shardedJedisPool与spring的集成配置
http://www.cnblogs.com/edisonfeng/p/3571870.html http://javacrazyer.iteye.com/blog/1840161 http://ww ...