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

Home

Backend Development

PHP Tutorial

Yii gridview implements time period filtering function

不言

May 03, 2018 pm 05:45 PM

ie period

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7722

Java Tutorial

1642

CakePHP Tutorial

1396

Laravel Tutorial

1289

PHP Tutorial

1233

Related knowledge

What are the 4 best times to tweet? Would TikTok be recommended in the early hours of the morning? Mar 07, 2024 pm 02:00 PM

With the rapid development of social media, Douyin has become a popular platform for many people to record their lives, share their creativity and showcase their talents. For users who want to gain more exposure and fans on Douyin, choosing the right time to post is crucial. After all, there are differences in user activity and attention in different time periods. So, what are the 4 best times to tweet? 1. What are the 4 best times to tweet? When determining the best time to post Douyin videos, you need to take into account the user's online time and activity level. By analyzing statistics and user behavior, you can identify the four best time periods for your videos to get more exposure and attract more fans on TikTok. 8pm to 10pm is a precious break for many people after get off work or school.

Internet Explorer opens Edge: How to stop MS Edge redirection Apr 14, 2023 pm 06:13 PM

It's no secret that Internet Explorer has fallen out of favor for a long time, but with the arrival of Windows 11, reality sets in. Rather than sometimes replacing IE in the future, Edge is now the default browser in Microsoft's latest operating system. For now, you can still enable Internet Explorer in Windows 11. However, IE11 (the latest version) already has an official retirement date, which is June 15, 2022, and the clock is ticking. With this in mind, you may have noticed that Internet Explorer sometimes opens Edge, and you may not like it. So why is this happening? exist

What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) Feb 10, 2024 am 10:30 AM

More and more users are starting to upgrade the win11 system. Since each user has different usage habits, many users are still using the ie11 browser. So what should I do if the win11 system cannot use the ie browser? Does windows11 still support ie11? Let’s take a look at the solution. Solution to the problem that win11 cannot use the ie11 browser 1. First, right-click the start menu and select "Command Prompt (Administrator)" to open it. 2. After opening, directly enter "Netshwinsockreset" and press Enter to confirm. 3. After confirmation, enter "netshadvfirewallreset&rdqu

How to cancel the automatic jump to Edge when opening IE in Win10_Solution to the automatic jump of IE browser page Mar 20, 2024 pm 09:21 PM

Recently, many win10 users have found that their IE browser always automatically jumps to the edge browser when using computer browsers. So how to turn off the automatic jump to edge when opening IE in win10? Let this site carefully introduce to users how to automatically jump to edge and close when opening IE in win10. 1. We log in to the edge browser, click... in the upper right corner, and look for the drop-down settings option. 2. After we enter the settings, click Default Browser in the left column. 3. Finally, in the compatibility, we check the box to not allow the website to be reloaded in IE mode and restart the IE browser.

How to solve the problem that IE shortcut cannot be deleted Jan 29, 2024 pm 04:48 PM

Solutions to IE shortcuts that cannot be deleted: 1. Permission issues; 2. Shortcut damage; 3. Software conflicts; 4. Registry issues; 5. Malicious software; 6. System issues; 7. Reinstall IE; 8. Use third-party tools; 9. Check the target path of the shortcut; 10. Consider other factors; 11. Consult professionals. Detailed introduction: 1. Permission issue, right-click the shortcut, select "Properties", in the "Security" tab, make sure you have sufficient permissions to delete the shortcut. If not, you can try running as an administrator, etc.

The end of an era: Internet Explorer 11 is retired, here's what you need to know Apr 20, 2023 pm 06:52 PM

June 15, 2022 is the day when Microsoft ends support for Internet Explorer 11 (IE11) and closes its legacy browser chapter. The company has been reminding users of this end-of-life date for some time and calling on them to plan a move to Microsoft Edge. Microsoft bundles IE11 with Windows 8.1 as the modern default web browser for Windows. Although it never reached the (current) heights of Chrome, it was the second most used desktop browser in 2014, behind IE8. Of course, with 20

How to enable IE acceleration function Jan 30, 2024 am 08:48 AM

How to enable IE acceleration function? IE is too slow to open web pages, we can enable hardware acceleration mode in it. Many friends reported that when using IE browser, the speed of opening web pages is extremely slow, which also has a certain impact on our browsing of the web. I just want to ask the editor if there is any solution. In this case, you can turn on the hardware acceleration mode of the IE browser. The editor has compiled the method of turning on the acceleration function of IE. If you are interested, take a look below! To enable the acceleration function in IE, open the IE secure browser, click the gear-shaped "Settings" icon in the upper right corner, and select "Internet Options" to enter, as shown in the figure. 2. Click "Advanced" in the tab navigation at the head of the Internet Options window, as shown in the figure. 3.

How to uninstall ie9 browser from win7 Jul 10, 2023 am 11:41 AM

How to uninstall ie9 from win7? Computers can handle things at work and can also be used for watching TV shows. Just like watching TV dramas, we usually use browsers to watch them. Because there are more and more browsers and their functions are perfect, fewer and fewer people are using ie9 browser now. So how to uninstall the browser in win7? Take a look at win7 How to uninstall IE9 browser from the system. How to uninstall ie9 browser from win7. 1. First, double-click to open MyPC and choose to uninstall or replace the program; 2. Then find "ViewInstallUpdate" and click on it. You can find "windows internet explorer9" inside, then right-click to delete. The above is the editor with wi

See all articles