yii gridview实现时间段筛选功能-php教程-PHP中文网

首页

后端开发

php教程

yii gridview实现时间段筛选功能

不言

May 03, 2018 pm 05:45 PM

ie时间段

这篇文章主要为大家详细介绍了yii gridview实现时间段筛选功能，一个输入框，自动提交功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

注意要点：

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(&#39;/plugins/datep/css/daterangepicker.css&#39;);
$this->registerJsFile(&#39;/plugins/datep/js/moment.min.js&#39;);
$this->registerJsFile(&#39;/plugins/datep/js/jquery.daterangepicker.js&#39;);
$this->registerJsFile(&#39;/plugins/datep/js/demo.js&#39;);
?>

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

    </p>
  </p>
</body>

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

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

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

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

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

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

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

相关推荐：

yii实现model添加默认值的方法

以上是yii gridview实现时间段筛选功能的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

发抖音的4个最佳时间段是什么时候？凌晨发抖音会被推荐吗？Mar 07, 2024 pm 02:00 PM

随着社交媒体的快速发展，抖音已经成为了许多人记录生活、分享创意和展示才华的热门平台。对于想要在抖音上获得更多曝光和粉丝的用户来说，选择合适的发布时间是至关重要的。毕竟，不同时间段的用户活跃度和关注度是有差异的。那么，发抖音的4个最佳时间段是什么时候呢？一、发抖音的4个最佳时间段是什么时候？在确定发布抖音视频的最佳时机时，需要综合考虑用户的在线时间和活跃度。通过分析统计数据和用户行为，可以确定四个最佳时间段，让您的视频在抖音上获得更多曝光和吸引更多粉丝。晚上8点至10点是许多人下班或放学后的宝贵休

win11无法使用ie11浏览器怎么办？(win11用不了ie浏览器)Feb 10, 2024 am 10:30 AM

越来越多的用户开始升级win11系统，由于每个用户的使用习惯不同，还是有不少用户在使用ie11浏览器，那么win11系统用不了ie浏览器，该怎么办呢？windows11还支持ie11吗？下面就来看看解决办法。win11无法使用ie11浏览器的解决方法1、首先右键开始菜单，选择“命令提示符（管理员）”打开。2、打开之后，直接输入“Netshwinsockreset”，回车确定。3、确定之后再输入“netshadvfirewallreset&rdqu

Internet Explorer 打开 Edge：如何停止 MS Edge 重定向Apr 14, 2023 pm 06:13 PM

长期以来，InternetExplorer的失宠一直不是秘密，但随着Windows11的到来，现实开始了。Edge将来不再有时取代IE，它现在是微软最新操作系统中的默认浏览器。目前，您仍然可以在Windows11中启用InternetExplorer。但是，IE11（最新版本）已经有了一个正式的退役日期，即2022年6月15日，时间在流逝。考虑到这一点，您可能已经注意到InternetExplorer有时会打开Edge，而您可能不喜欢它。那么为什么会这样呢？在

Win10打开IE自动跳转到Edge怎么取消_IE浏览器页面自动跳转的解决办法Mar 20, 2024 pm 09:21 PM

近期不少的win10用户们在使用电脑浏览器的时候发现自己的ie浏览器总是自动的跳转到edge浏览器，那么win10打开ie自动跳转edge怎么关闭?。下面就让本站来为用户们来仔细的介绍一下win10打开ie自动跳转edge关闭方法吧。1、我们登录edge浏览器，点击右上角...，找下拉的设置选项。2、我们进入设置后，在左侧栏点击默认浏览器。3、最后我们在兼容性中，勾选不允许IE模式下重新加载网站，重启ie浏览器即可。

一个时代的结束：Internet Explorer 11 已退役，这是你需要知道的Apr 20, 2023 pm 06:52 PM

2022年6月15日是Microsoft结束对InternetExplorer11(IE11)的支持并关闭其旧版浏览器章节的日子。一段时间以来，该公司一直在提醒用户注意这一生命周期结束日期，并呼吁他们计划迁移到MicrosoftEdge。Microsoft将IE11与Windows8.1捆绑在一起，作为Windows的现代默认Web浏览器。尽管它从未达到Chrome的（当前）高度，但它是2014年使用量第二大的桌面浏览器，仅次于IE8。当然，随着20

ie快捷方式无法删除如何解决Jan 29, 2024 pm 04:48 PM

ie快捷方式无法删除的解决办法：1、权限问题；2、快捷方式损坏；3、软件冲突；4、注册表问题；5、恶意软件；6、系统问题；7、重新安装IE；8、使用第三方工具；9、检查快捷方式的目标路径；10、考虑其他因素；11、咨询专业人士。详细介绍：1、权限问题，右键点击快捷方式，选择“属性”，在“安全”选项卡中，确保有足够的权限删除该快捷方式，如果没有，可以尝试以管理员身份运行等等。

如何启用IE的加速功能Jan 30, 2024 am 08:48 AM

ie加速功能怎么开？ie打开网页的速度太慢，我们可以在里面开启硬件加速模式。很多小伙伴反应说在使用ie浏览器的时候，打开网页的速度特别的慢，这样对我们浏览网页也造成了一定影响。就想询问小编有什么解决办法，这种情况是可以开启ie浏览器的硬件加速模式，小编下面整理了ie开启加速功能方法，感兴趣的话一起往下看看！ie开启加速功能方法打开IE安全浏览器，点击右上角齿轮状的“设置”图标，选择“Internet选项”进入，如图所示。2、在Internet选项的窗口头部的标签导航中点击“高级”，如图所示。3、

win10家庭版IE浏览器突然打不开了Jan 18, 2024 pm 02:57 PM

或许有部分朋友日常工作或因个人需求而深谙于使用InternetExplorer(IE)浏览器。然而，在Windows系统版本升级至Windows10之后，他们可能会不期然遭遇IE无法正常运行之烦扰。在此种情况下，可以尝试依据Microsoft官方网站所提供的"帮助与支持中心"中的解决方案，来设法排除此问题。win10家庭版IE浏览器突然打不开了1、打开Internet选项，然后切换到连接2、再点击下面的局域网设置3、然后把这里的选项都取消勾选4、然后以管理员身份运行cmd，再输入netsh回车5

See all articles