Yii GridView is powerful, but time filtering is troublesome, related to the storage format of the database, the time format of this article is the date type
So the problem is that Yii only provides a text search format for time, that is, it can only find exact dates such as 2017-8-10. Omnipotent customers say this is not possible, I want to search the time period! I just need an input box! I want to submit automatically!
Note The main points:
1. First of all in the GridView to introduce the relevant JS, the implementation of the two dates, here selected Jquery.daterangepicker.js, simple and generous (disadvantage: Can not select the year, need to manually click, I will not be a large cross-year, available)
2. To deal with data in Searchmodel, make time query
3. Pit: Select the date, the input box does not have a cursor, need two clicks, and then enter to achieve data refresh, and the original GridView experience is a big difference
4. Ladder: After the input date data has been detected, the use of JQ analog carriage return submission action, the perfect implementation of the original experience like the GridView, silk-like smooth
In view
<?php//use yii\web\view;use kartik\grid\gridview;use yii\bootstrap\html;use common\helps\ArrayHelper;use yii\ Helpers\url;//introduced the time period JS, here used Jquery.daterangepicker.js$this->registercssfile ('/plugins/datep/css/ Daterangepicker.css '), $this->registerjsfile ('/plugins/datep/js/moment.min.js '); $this->registerjsfile ('/ Plugins/datep/js/jquery.daterangepicker.js '); $this->registerjsfile ('/plugins/datep/js/demo.js ');? ><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: : Widgets ([' title ' = ' Records Management '])?> <p class= "Ibox-content" > <?php Echo gridview::widget ([' dataprovider ' = $dataProvider, ' filt Ermodel ' + $searchModel, ' columns ' = [ [' class ' = ' Yii\grid\serialcolumn '], [' class ' = ' Yii\grid\checkboxcolumn '], ' title ', [' label ' = ' time ' issued, ' attribute ' = ' issued ', ' value ' = function ($data) {return Arrayhelper::get_date_time ($data->issued); }, ], ] ]); ?> </p> </p> </p> </p> </p> </p> < ;/p></body>
Demo.js put in the last say, first say patentdatabdsearch to the input box sent over the data processing, time period query database
Time period Filter if ($this->issued) { $time = explode (' ~ ', $this->issued); $query->andfilterwhere ([' Between ', ' patent_data.issued ', $time [0], $time [1]]); }Demo.js for data detection and simulation of return operation
$ (function () {/* Define a new language named "Custom" plug-in Settings */$.daterangepickerlanguages[' custom '] = {' Select Ed ': ' Choosed: ' Days ': ' Days ', ' Apply ': ' Close ', ' week-1 ': ' Mon ', ' week-2 ': ' Tue ', ' week-3 ': ' Wed ', ' week-4 ': ' Thu ', ' week-5 ': ' Fri ', ' week-6 ': ' Sat ', ' week-7 ': ' Sun ', ' month-name ': [' January ', ' February ', ' March ', ' April ', ' may ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December ', ' Shortcuts ': ' Shortcuts ', ' past ': ' Past ', ' 7days ': ' 7days ', ' 14days ': ' 14days ', ' 30days ': ' 30days ', ' previous ': ' Prev IOUs ', ' prev-week ': ' Week ', ' prev-month ': ' Month ', ' prev-quarter ': ' Quarter ', ' prev-year ': ' Year ', ' Les S-than ': ' date range should longer than%d days ', ' More-than ': ' date range should less than%d days ', ' Default-mor E ': ' Please select a date range longer than%d days ', ' default-less ': ' "Please select a date range less than than%d days ', ' Default-range ': ' Please select a Date range between%d and%d days ', ' default-default ': ' This is Costom language '}; The following settings call your own input box selector $ ("Input[name= ' patentdatabdsearch[issued]"). Daterangepicker (The type setting of the {//time period, here is the input box time period is delimited by ~, After selecting the time automatically disappears pop-up box separator: ' ~ ', autoclose:true}). bind (' Datepicker-change ', function (e,r) {try {con Sole.log (R); Important: If the detection has input values, just display the cursor in the input box, or simulate the carriage return event, Auto Commit, like the GridView native function//do not add the following code, will not be automatically submitted, var issued=$ ("Input[name= ' patentdatabdsearch[issued] '). Val (); Console.log (issued); The IF (issued) {//input is displayed after the cursor//$ ("Input[name= ' patentdatabdsearch[issued]"). focus (); Simulate carriage return operation, automatically submit after input, refresh the data, be sure to set the time counter, otherwise you will not be able to submit setTimeout (function () {e = Jquery.event ("KeyDown"); E.keycode = 13; Enter key JQuery ("Input[name= ' patentdatabdsearch[issued]"). Trigger (e); },100); }}catch (e) {}});Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
