yii gridview实现时间段过滤功能

Yii gridview功能强大，但是时间过滤比较麻烦，这和数据库的存储格式有关。本文的时间格式是日期类型

那么问题来了。yii只提供了关于时间的文字搜索格式，即只能找到确切的日期，比如2017年8月10日。万能的客户说这样不行。我要搜索时间段！我只要一个输入框！我要自动提交！

需要注意的要点：

1.首先，在gridview中引入相关的js，实现双日期。这里选择了jquery . dateragepicker . js，简单大方(缺点：不能选择年份，需要手动点击，我这里不会大跨年，所以有)

2.有必要处理搜索模型中的数据并查询时间

3.Pit:选择日期后，输入框中没有光标，需要点击两次再输入才能刷新数据，与原来的gridview体验有很大不同

4.天梯：检测到输入的日期数据后，用jq模拟输入提交动作，完美实现了类似gridview的原始体验，丝滑流畅

看得见的

？PHP//使用yii \ web \ View使用kartik \ grid \ GridView使用yii \ bootstrap \ Html使用常用帮助\ ArrayHelper使用yii \ helpers \ Url//介绍时间段js，其中使用了jquery . dateragepicker . js $ this-registerssfile('/plugins/datep/CSS/dateragepicker . CSS ')；$ this-registerJsFile('/plugins/datep/js/moment . min . js ')；$ this-registerJsFile('/plugins/datep/js/jquery . dateragepicker . js ')；$ this-RegisterJSFIle('/plugins/datep/js/demo . js ')；body class=' gray-BG ' div class=' wrapper-content animated fadeInRight ' div class=' row ' div class=' col-sm-12 ' div class=' ibox float-e-margins '？=后端\ widgets \ title back : widget([' title '='记录管理'])？div class='ibox-content '？PHP echo GridView : widget([' data provider '=$ data provider，' filterModel '=$ searchModel，' columns '=[' class '=' yii \ grid \ serial column ']，[' class '=' YII \ grid \ checkbox column ']，' title '，['label'='发行时间'，' attribute'='发行'，' value '=function($ data){ return arrayhelper 336033: get _ date _ time($)}，]？/div/div/div/div/div/body demo . js最后，假设PatentDataBdSearch处理输入框发送的数据，并及时查询数据库

//时间段过滤器if($ this-issued){ $ Time=explode(' ~ '，$ this-issued)；$ query-and filterwhere([' between '，' patent_data.issued '，$time[0]，$ time[1]])；}demo.js实现数据检测，模拟回车操作

$(function(){ /*定义名为“自定义”的新语言插件设置*/$.date range pickerlanguages[' custom ']={ ' selected ' : '选项d : '，' days': 'Days '，' apply': 'Close '，' week-1' : 'Mon '，' week-2' : 'Tue '，' week-3' : 'Wed '，' week-4' : 'Thu '，' Week-5 ' 333: ' Fri '，' Week-6 ' 3333: ' Sat '，'请选择一个长于%d天的日期范围，“无默认值”:请选择一个小于%d天的日期范围，'默认范围' : '请选择一个在%d到%d天之间的日期范围，'默认-默认' : '这是成本语言' };//下面设置称自己的输入框选择器$(' input[name=' patent database search[颁发]']')。dateRangePicker({ //时间段的类型设置，这里是输入框时间段以~分隔，选择时间后自动消失弹出框分隔符： ' ~ '，autoClose: true }).绑定(' datepicker-change '，函数(e，r){尝试{控制台。log(r)}；//重要：如果检测有输入值了，就在输入框显示光标，或者模拟回车事件，自动提交，像gridview原生功能//不添加下面的代码，将无法自动提交，var发行=$(' input[name=' patent database search[发行]']')。val()；console.log(已发出);如果(发行){ //输入之后显示光标//$(' input[name=' patent database search[issued]']').焦点();//模拟回车操作，输入后自动提交，刷新数据，一定要设置时间计数器，否则将无法提交setTimeout(函数(){ e=jQuery .事件(“keydown”)；e.keyCode=13//输入键' jQuery('输入[name=' patentdatabase search[颁发]']')。触发器(e );},100);} } catch(e){ } })；});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。