Maison développement back-end tutoriel php Yii GridView implémente la fonction de filtrage de période

Yii GridView implémente la fonction de filtrage de période

May 03, 2018 pm 05:45 PM
ie période

Cet article présente principalement en détail la fonction de filtrage de période de yii Gridview, une zone de saisie et une fonction de soumission automatique, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

yii Gridview est puissant, mais le temps. le filtrage est gênant. Il est lié au format de stockage de la base de données. Le format de l'heure dans cet article est de type date

Ensuite, le problème vient uniquement du format de recherche de texte sur l'heure, c'est-à-dire qu'il peut. seulement trouver précis La date est telle que 2017-8-10. Le client de Tout-Puissant a dit que cela ne fonctionnerait pas, je souhaite rechercher une période ! Je veux juste une zone de saisie ! Je veux soumettre automatiquement!

Points à noter :

1. Tout d'abord, introduisez les js pertinents dans la grille pour implémenter des dates doubles. Ici, nous avons choisi jquery.daterangepicker. js , simple et généreux (inconvénients : on ne peut pas sélectionner l'année, il faut cliquer manuellement, je ne vais pas beaucoup étaler les années ici, c'est disponible)

2 Pour traiter les données dans le modèle de recherche, effectuer une requête temporelle

3. Piège : après avoir sélectionné la date, la zone de saisie n'a pas de curseur et vous devez cliquer deux fois puis appuyer sur Entrée pour actualiser les données, ce qui est assez différent de l'expérience GridView d'origine

4. Échelle : lorsque les données de date d'entrée sont détectées. Enfin, utilisez jq pour simuler l'action de soumission du retour chariot, qui réalise parfaitement l'expérience originale similaire à la vue en grille,

vue

douce et soyeuse.
<?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>
Copier après la connexion

demo.js est mis à la fin, parlons-en d'abord PatentDataBdSearch Traite les données envoyées depuis la zone de saisie et interroge la base de données pendant la période

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

demo.js Implémente détection des données et simule l'opération de retour chariot

$(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){}
  });
});
Copier après la connexion

Recommandations associées :

Yii implémente la méthode d'ajout de valeur par défaut au modèle


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quels sont les 4 meilleurs moments pour tweeter ? TikTok serait-il recommandé au petit matin ? Quels sont les 4 meilleurs moments pour tweeter ? TikTok serait-il recommandé au petit matin ? Mar 07, 2024 pm 02:00 PM

Avec le développement rapide des médias sociaux, Douyin est devenu une plateforme populaire permettant à de nombreuses personnes d'enregistrer leur vie, de partager leur créativité et de mettre en valeur leurs talents. Pour les utilisateurs qui souhaitent gagner plus de visibilité et de fans sur Douyin, choisir le bon moment pour publier est crucial. Après tout, il existe des différences dans l’activité et l’attention des utilisateurs selon les périodes. Alors, quels sont les 4 meilleurs moments pour tweeter ? 1. Quels sont les 4 meilleurs moments pour tweeter ? Lorsque vous déterminez le meilleur moment pour publier des vidéos Douyin, vous devez prendre en compte le temps en ligne et le niveau d'activité de l'utilisateur. En analysant les statistiques et le comportement des utilisateurs, vous pouvez identifier les quatre meilleures périodes pour que vos vidéos obtiennent plus de visibilité et attirent plus de fans sur TikTok. De 20h à 22h est une pause précieuse pour de nombreuses personnes après avoir quitté le travail ou l'école.

Internet Explorer ouvre Edge : Comment arrêter la redirection MS Edge Internet Explorer ouvre Edge : Comment arrêter la redirection MS Edge Apr 14, 2023 pm 06:13 PM

Ce n’est un secret pour personne, Internet Explorer est tombé en disgrâce depuis longtemps, mais avec l’arrivée de Windows 11, la réalité s’installe. Plutôt que de remplacer parfois IE à l'avenir, Edge est désormais le navigateur par défaut du dernier système d'exploitation de Microsoft. Pour l'instant, vous pouvez toujours activer Internet Explorer dans Windows 11. Cependant, IE11 (la dernière version) a déjà une date officielle de mise à la retraite, qui est le 15 juin 2022, et le temps presse. Dans cet esprit, vous avez peut-être remarqué qu'Internet Explorer ouvre parfois Edge, et cela ne vous plaira peut-être pas. Alors pourquoi cela se produit-il ? exister

Que dois-je faire si Win11 ne peut pas utiliser le navigateur ie11 ? (win11 ne peut pas utiliser le navigateur IE) Que dois-je faire si Win11 ne peut pas utiliser le navigateur ie11 ? (win11 ne peut pas utiliser le navigateur IE) Feb 10, 2024 am 10:30 AM

De plus en plus d'utilisateurs commencent à mettre à niveau le système Win11. Étant donné que chaque utilisateur a des habitudes d'utilisation différentes, de nombreux utilisateurs utilisent toujours le navigateur ie11. Alors, que dois-je faire si le système Win11 ne peut pas utiliser le navigateur ie ? Windows11 prend-il toujours en charge ie11 ? Jetons un coup d'œil à la solution. Solution au problème selon lequel Win11 ne peut pas utiliser le navigateur ie11 1. Tout d'abord, cliquez avec le bouton droit sur le menu Démarrer et sélectionnez « Invite de commandes (administrateur) » pour l'ouvrir. 2. Après ouverture, entrez directement « Netshwinsockreset » et appuyez sur Entrée pour confirmer. 3. Après confirmation, entrez « netshadvfirewallreset&rdqu ».

Comment annuler le saut automatique vers Edge lors de l'ouverture d'IE dans Win10_Solution vers le saut automatique de la page du navigateur IE Comment annuler le saut automatique vers Edge lors de l'ouverture d'IE dans Win10_Solution vers le saut automatique de la page du navigateur IE Mar 20, 2024 pm 09:21 PM

Récemment, de nombreux utilisateurs de Win10 ont constaté que leur navigateur IE passe toujours automatiquement au navigateur Edge lorsqu'ils utilisent des navigateurs informatiques. Alors, comment désactiver le saut automatique vers Edge lors de l'ouverture d'IE dans Win10 ? Laissez ce site présenter soigneusement aux utilisateurs comment passer automatiquement au bord et se fermer lors de l'ouverture d'IE dans Win10. 1. Nous nous connectons au navigateur Edge, cliquons sur... dans le coin supérieur droit et recherchons l'option de paramètres déroulante. 2. Après avoir entré les paramètres, cliquez sur Navigateur par défaut dans la colonne de gauche. 3. Enfin, dans la compatibilité, on coche la case pour ne pas autoriser le rechargement du site web en mode IE et on redémarre le navigateur IE.

Comment résoudre le problème selon lequel le raccourci IE ne peut pas être supprimé Comment résoudre le problème selon lequel le raccourci IE ne peut pas être supprimé Jan 29, 2024 pm 04:48 PM

Solutions aux raccourcis IE qui ne peuvent pas être supprimés : 1. Problèmes d'autorisation ; 2. Dommages aux raccourcis ; 3. Conflits logiciels ; 4. Problèmes de registre 6. Problèmes de système ; 7. Réinstaller IE ; outils ; 9. Vérifiez le chemin cible du raccourci ; 10. Tenez compte d’autres facteurs ; 11. Consultez des professionnels. Introduction détaillée : 1. Problème d'autorisation, cliquez avec le bouton droit sur le raccourci, sélectionnez "Propriétés", dans l'onglet "Sécurité", assurez-vous que vous disposez des autorisations suffisantes pour supprimer le raccourci. Sinon, vous pouvez essayer de l'exécuter en tant qu'administrateur, etc. .

La fin d'une époque : Internet Explorer 11 est retiré, voici ce qu'il faut savoir La fin d'une époque : Internet Explorer 11 est retiré, voici ce qu'il faut savoir Apr 20, 2023 pm 06:52 PM

Le 15 juin 2022 est le jour où Microsoft met fin au support d'Internet Explorer 11 (IE11) et clôture son chapitre sur les anciens navigateurs. L’entreprise rappelle depuis un certain temps aux utilisateurs cette date de fin de vie et les appelle à envisager une migration vers Microsoft Edge. Microsoft regroupe IE11 avec Windows 8.1 comme navigateur Web moderne par défaut pour Windows. Bien qu’il n’ait jamais atteint les sommets (actuels) de Chrome, il était le deuxième navigateur de bureau le plus utilisé en 2014, derrière IE8. Bien sûr, avec 20

Comment activer la fonction d'accélération IE Comment activer la fonction d'accélération IE Jan 30, 2024 am 08:48 AM

Comment activer la fonction d'accélération d'IE ? IE est trop lent pour ouvrir des pages Web, nous pouvons y activer le mode d'accélération matérielle. De nombreux amis ont signalé que lors de l'utilisation du navigateur IE, la vitesse d'ouverture des pages Web est extrêmement lente, ce qui a également un certain impact sur notre navigation sur le Web. Je veux juste demander à l'éditeur s'il existe une solution. Dans ce cas, vous pouvez activer le mode d'accélération matérielle du navigateur IE. L'éditeur a compilé ci-dessous la méthode d'activation de la fonction d'accélération d'IE. , jetez un oeil ci-dessous! Pour activer la fonction d'accélération dans IE, ouvrez le navigateur sécurisé d'IE, cliquez sur l'icône « Paramètres » en forme d'engrenage dans le coin supérieur droit et sélectionnez « Options Internet » pour entrer, comme indiqué sur la figure. 2. Cliquez sur "Avancé" dans l'onglet de navigation en tête de la fenêtre Options Internet, comme indiqué sur la figure. 3.

Comment désinstaller le navigateur ie9 de win7 Comment désinstaller le navigateur ie9 de win7 Jul 10, 2023 am 11:41 AM

Comment désinstaller ie9 de win7 ? Les ordinateurs peuvent gérer des choses au travail et peuvent également être utilisés pour regarder des émissions de télévision. Tout comme pour regarder des drames, nous utilisons généralement des navigateurs pour les regarder. Parce qu'il y a de plus en plus de navigateurs et que leurs fonctions sont parfaites, de moins en moins de personnes utilisent le navigateur ie9 maintenant. Alors, comment désinstaller le navigateur dans Win7, jetez un œil à Win7. pour désinstaller le navigateur IE9 du système. Comment désinstaller le navigateur ie9 de win7. 1. Tout d'abord, double-cliquez pour ouvrir MyPC et choisissez de désinstaller ou de remplacer le programme ; 2. Recherchez ensuite "ViewInstallUpdate" et cliquez dessus. Vous pouvez trouver "Windows Internet Explorer9" à l'intérieur, puis cliquez avec le bouton droit pour supprimer. Ce qui précède est l'éditeur avec wi

See all articles