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中的类-什么叫类
Nov 20 PHP
MySql中正则表达式的使用方法描述
Jul 30 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
Feb 16 PHP
PHP求小于1000的所有水仙花数的代码
Jan 10 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
Sep 10 PHP
php计算多维数组中所有值总和的方法
Jun 24 PHP
header与缓冲区之间的深层次分析
Jul 30 PHP
php利用嵌套数组拼接与解析json的方法
Feb 07 PHP
php关联数组与索引数组及其显示方法
Mar 12 PHP
PDO::errorInfo讲解
Jan 28 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
Oct 18 PHP
PHP设计模式入门之状态模式原理与实现方法分析
Apr 26 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
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript 闭包详解
2015/02/15 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python实现下载文件的三种方法
2017/02/09 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
django反向解析和正向解析的方式
2018/06/05 Python
Django中的Model操作表的实现
2018/07/24 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
承诺书的格式范文
2014/03/28 职场文书
党员自我剖析材料
2014/08/31 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
自我推荐信怎么写
2015/03/24 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书