Yii gridview implements time period filtering function-PHP Tutorial-php.cn

Yii gridview implements time period filtering function

不言

Release： 2023-03-25 10:00:02

Original

1715 people have browsed it

This article mainly introduces in detail the time period filtering function of yii gridview, an input box, and automatic submission function. It has certain reference value. Interested friends can refer to it

yii Gridview is powerful, but time filtering is troublesome, and it is related to the storage format of the database. The time format in this article is date type

. Then the problem comes, Yii only provides text search format about time, that is, it can only find accurate The date is such as 2017-8-10. Almighty's customer said this won't work, I want to search for a time period! I just want an input box! I want to submit automatically!

Points to note:

1. First, introduce relevant js into the gridview to implement double dates. Here we chose jquery.daterangepicker.js , simple and generous (disadvantages: you cannot select the year, you need to click manually, I will not greatly span the years, it is available)

2. To process the data in the search model, perform time query

3. Pitfall: After selecting the date, the input box has no cursor, and you need to click twice and then press Enter to refresh the data, which is quite different from the original gridview experience.

4. Ladder: When the input date data is detected Finally, use jq to simulate the carriage return submission action, which perfectly realizes the original experience similar to gridview, silky smooth

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>

Copy after login

demo.js is put at the end, let’s talk about PatentDataBdSearch first. The data sent from the input box is processed, and the database is queried during the time period

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

Copy after login

demo.js Implements data detection and simulates the carriage return operation

$(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){}
  });
});

Copy after login

Related recommendations:

Yii implements the method of adding default values to model

The above is the detailed content of Yii gridview implements time period filtering function. For more information, please follow other related articles on the PHP Chinese website!