ホームページ > 記事 > バックエンド開発 > yii Gridview の期間フィルタリング関数の例の詳細な説明

yii Gridview の期間フィルタリング関数の例の詳細な説明

小云云オリジナル: 2018-01-26 13:34:161598ブラウズ

yii GridView は強力ですが、データベースの保存形式に関係する時間フィルタリングが面倒です。この記事では主に入力形式である yii GridView の時間フィルタリング機能について詳しく紹介します。ボックスと自動送信機能を備えていますので、興味のある方は参考にしていただければ幸いです。

そして問題が発生します。yii は時間に関するテキスト検索形式しか提供していません。つまり、2017-8-10 のような正確な日付しか検索できません。 Almighty のお客様は、これではうまくいかない、期間を検索したいと言いました。入力ボックスが欲しいだけです！自動で提出したい！

注意点:

1. まず、グリッドビューに関連する js を導入して、二重日付を実装します。ここでは、シンプルで寛大な jquery.daterangepicker.js を選択しました (欠点: 年を選択できません)。手動でクリックする必要があります。私はここにいます。何年にもわたっては使用できません)

2. 検索モデルでデータを処理し、時間クエリを実行する必要があります

3. 日付を選択した後、入力ボックスにはカーソルがなく、データを更新するには 2 回クリックして Enter キーを押す必要があります。これは、元のグリッドビューのエクスペリエンスとは大きく異なります

4. 入力日付データを検出した後、jq を使用してキャリッジリターンの送信をシミュレートします。オリジナルの GridView のようなエクスペリエンスを完全に実現するアクションです。シルキースムーズ

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

関連する推奨事項: 実行期間メソッドを変更する

時間帯に応じた挨拶の表示方法を実装するjavascript

時間帯の実装コードを決定するjavascript

以上がyii Gridview の期間フィルタリング関数の例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：LaravelのAuthモジュール例の詳しい説明次の記事：LaravelのAuthモジュール例の詳しい説明

続きを見る