yii gridview实现时间段筛选功能


Posted in PHP onAugust 15, 2017

yii gridview功能强大,但是时间筛选比较麻烦,与数据库的存储格式有关,本文的时间格式是date类型

那么问题来了,yii只提供关于时间的text搜索格式,就是只能查找精确日期比如2017-8-10。万能的客户说这样不行,我要搜索时间段!我只要一个输入框!我要自动提交!

yii gridview实现时间段筛选功能 yii gridview实现时间段筛选功能

注意要点:

1.首先要在gridview中引入相关js,实现双日期,这里选择了jquery.daterangepicker.js,简单大方(缺点:不能选择年份,需要手动点击,我这里不会大幅度跨年份,可用)

2.要在searchmodel里面对数据进行处理,进行时间查询

3.坑:选择日期后,输入框没有光标,需要二次点击,然后回车才能实现数据刷新,与原装gridview体验相差较大

4.梯:在检测到输入日期数据后,使用jq模拟回车提交动作,完美实现了类似gridview的原装体验,丝般顺滑

view中

<?php

//use yii\web\View;
use kartik\grid\GridView;
use yii\bootstrap\Html;
use common\helps\ArrayHelper;
use yii\helpers\Url;

//引入时间段js,这里使用了jquery.daterangepicker.js
$this->registerCssFile('/plugins/datep/css/daterangepicker.css');
$this->registerJsFile('/plugins/datep/js/moment.min.js');
$this->registerJsFile('/plugins/datep/js/jquery.daterangepicker.js');
$this->registerJsFile('/plugins/datep/js/demo.js');
?>

<body class="gray-bg">
  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
      <div class="col-sm-12">
        <div class="ibox float-e-margins">
           <?= backend\widgets\TitleBack::widget(['title'=>'记录管理']) ?>
           
          <div class="ibox-content">  
            
          <?php
                   
            echo GridView::widget([
                'dataProvider' => $dataProvider,
                'filterModel' => $searchModel,
     
                'columns' => [
                  
                  ['class' => 'yii\grid\SerialColumn'],
                  ['class' => 'yii\grid\CheckboxColumn'],
                  'title',
                  
                  [
                    
'label'=>'下发时间',
'attribute'=>'issued',
                     'value' => function ($data) {
                      return ArrayHelper::get_date_time($data->issued);
                    },                    
                  ],
                ]
             ]);
          
          ?>
            </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

demo.js放在最后说,先说PatentDataBdSearch  对输入框发送过来的数据进行处理,时间段查询数据库

//时间段筛选
    if($this->issued){
      $time= explode('~', $this->issued);
      $query->andFilterWhere(['between', 'patent_data.issued', $time[0],$time[1]]); 
    }

demo.js   实现数据检测,模拟回车操作

$(function(){
  
  /*
  define a new language named "custom"  插件设置
  */

  $.dateRangePickerLanguages['custom'] = 
  {
    'selected': 'Choosed:',
    'days': 'Days',
    'apply': 'Close',
    'week-1' : 'Mon',
    'week-2' : 'Tue',
    'week-3' : 'Wed',
    'week-4' : 'Thu',
    'week-5' : 'Fri',
    'week-6' : 'Sat',
    'week-7' : 'Sun',
    'month-name': ['January','February','March','April','May','June','July','August','September','October','November','December'],
    'shortcuts' : 'Shortcuts',
    'past': 'Past',
    '7days' : '7days',
    '14days' : '14days',
    '30days' : '30days',
    'previous' : 'Previous',
    'prev-week' : 'Week',
    'prev-month' : 'Month',
    'prev-quarter' : 'Quarter',
    'prev-year' : 'Year',
    'less-than' : 'Date range should longer than %d days',
    'more-than' : 'Date range should less than %d days',
    'default-more' : 'Please select a date range longer than %d days',
    'default-less' : 'Please select a date range less than %d days',
    'default-range' : 'Please select a date range between %d and %d days',
    'default-default': 'This is costom language'
  };
  
  
  //下面设置称自己的输入框选择器
  $("input[name='PatentDataBdSearch[issued]']").dateRangePicker(
  {
 //时间段的类型设置,这里是输入框时间段以~分隔,选择时间后自动消失弹出框
     separator : ' ~ ',
     autoClose: true
  }).bind('datepicker-change',function(e,r)
  {
    try
    {
      console.log(r);
            //重要:如果检测有输入值了,就在输入框显示光标,或者模拟回车事件,自动提交,像gridview原生功能
//不添加下面的代码,将无法自动提交,
            var issued=$("input[name='PatentDataBdSearch[issued]']").val();
            console.log(issued);
            if(issued){
              //输入之后显示光标
              //$("input[name='PatentDataBdSearch[issued]']").focus();
//模拟回车操作,输入后自动提交,刷新数据,一定要设置时间计数器,否则将无法提交

              setTimeout(function(){
                e = jQuery.Event("keydown");
                e.keyCode = 13; //enter key
                jQuery("input[name='PatentDataBdSearch[issued]']").trigger(e);

              },100);
            }
    }catch(e){}
  });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
Dec 19 PHP
解析百度搜索结果link?url=参数分析 (全)
Oct 09 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
Apr 10 PHP
php集成环境xampp中apache无法启动问题解决方案
Nov 18 PHP
PDO预处理语句PDOStatement对象使用总结
Nov 20 PHP
浅析php设计模式之数据对象映射模式
Mar 03 PHP
java模拟PHP的pack和unpack类
Apr 13 PHP
PHP实现的随机IP函数【国内IP段】
Jul 20 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
Mar 23 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
Jul 19 PHP
PHP二维关联数组的遍历方式(实例讲解)
Oct 18 PHP
让Laravel API永远返回JSON格式响应的方法示例
Sep 05 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
Aug 15 #PHP
Laravel学习教程之IOC容器的介绍与用例
Aug 15 #PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
Aug 15 #PHP
PHP高精确度运算BC函数库实例详解
Aug 15 #PHP
PHP+原生态ajax实现的省市联动功能详解
Aug 15 #PHP
laravel学习笔记之模型事件的几种用法示例
Aug 15 #PHP
PHP实现的回溯算法示例
Aug 15 #PHP
You might like
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
基于empty函数的输出详解
2013/06/17 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python yield 使用浅析
2015/05/28 Python
django之session与分页(实例讲解)
2017/11/13 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
深入理解Python 多线程
2020/06/16 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
美国汽车交易网站:Edmunds
2016/08/17 全球购物
法国家具及室内配件店:home24
2017/01/21 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
文明礼仪事迹材料
2014/01/09 职场文书
仓库管理制度
2014/01/21 职场文书
个人简历自我评价范文
2014/02/04 职场文书
安全负责人任命书
2014/06/06 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
留学推荐信英文范文
2015/03/26 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript