Gridview日期过滤列(filter date column for gridview in Yii framework)

Gridview日期过滤列(filter date column for gridview in Yii framework)

CActiveDataProvider, CArrayDataProvider, CSqlDataProvider做为gridview挂件的数据提供者的使用经验
使用yii进行命令行程序设计
近期评论
alpha-永 在 应用Yii1.1和PHP5进行敏捷Web开发(十) 上的评论
Boy.Lee ^ ^ 在 应用Yii1.1和PHP5进行敏捷Web开发(十二) 上的评论
Boy.Lee ^ ^ 在 Yii中文API翻译项目启动 上的评论
xieguolun 在 应用Yii1.1和PHP5进行敏捷Web开发(十二) 上的评论
CArrayDataProvider in Yii Code Demo » Welcome to YiiBlog 在 CActiveDataProvider, CArrayDataProvider, CSqlDataProvider做为gridview挂件的数据提供者的使用经验 上的评论
文章归档
2011 年四月
2011 年三月
2011 年二月
2011 年一月
2010 年十二月
2010 年十一月
2010 年十月
分类目录
YiiBook动态
YiiBook翻译
Yii使用心得
未分类
功能
登录
文章 RSS
评论 RSS
WordPress.org

← Older posts
Gridview日期过滤列(filter date column for gridview in Yii framework)
Posted on 2011 年 04 月 22 日 by Syang

SYDateColumn下载(Download SYDateColumn

先看图(First look snapshot)：

ok，这里我自定义了一个日期列挂件，扩展了CDataColumn，名叫SYDateColumn.php，代码贴了下面
(OK,this is a custom widget of a date column, extends CDataColumn, its name is SYDateColumn.php. Code:)
SYDateColumn.php
01 <php
02 Yii::import('zii.widgets.grid.CDataColumn');
03
04 class SYDateColumn extends CDataColumn
05 {
06
07 /**
08 * if filter is false then no show filter
09 * else if filter is 'range' string then show from input to input
10 * else if filter is 'single' string then show input
11 * @var mixed
12 */
13 public $filter='range';
14
15 public $language = false;
16
17 /**
18 * jquery-ui theme name
19 * @var string
20 */
21 public $theme = 'base';
22
23 public $fromText = 'From: ';
24
25 public $toText = 'To: ';
26
27 public $dateFormat = 'yy-mm-dd';
28
29 public $dateInputStyle="width:70%";
30
31 public $dateLabelStyle="width:30%;display:block;float:left;";
32
33 public $dateOptions = array();
34
35 /**
36 * Renders the filter cell content.
37 */
38 protected function renderFilterCellContent()
39 {
40 if($this->filter!==false && $this->grid->filter!==null && $this->name!==null && strpos($this->name,'.')===false)
41 {
42
43 $cs=Yii::app()->getClientScript();
44 $cs->registerCssFile($cs->getCoreScriptUrl().'/jui/css/'. $this->theme .'/jquery-ui.css');
45 if ($this->language!==false) {
46 $cs->registerScriptFile($cs->getCoreScriptUrl().'/jui/js/jquery-ui-i18n.min.js');
47 }
48 $cs->registerScriptFile($cs->getCoreScriptUrl().'/jui/js/jquery-ui.min.js');
49
50 if ($this->filter=='range') {
51 echo CHtml::tag('div', array(), "<span style="". $this->dateLabelStyle ."">". $this->fromText ."</span>" . CHtml::activeTextField($this->grid->filter, $this->name.'_range[from]', array('style'=>$this->dateInputStyle, 'class'=>'filter-date')));
52 echo CHtml::tag('div', array(), "<span style="". $this->dateLabelStyle ."">". $this->toText ."</span>". CHtml::activeTextField($this->grid->filter, $this->name.'_range[to]', array('style'=>$this->dateInputStyle, 'class'=>'filter-date')));
53 }
54 else {
55 echo CHtml::tag('div', array(), CHtml::activeTextField($this->grid->filter, $this->name.'_range[to]', array('class'=>'filter-date')));
56 }
57 $options=CJavaScript::encode($this->dateOptions);
58
59 if ($this->language!==false) {
60 $js=<<<eod $(filter_date).datepicker(jquery.extend({dateformat:'{$this-="">dateFormat}'}, jQuery.datepicker.regional['{$this->language}'], {$options}));
61 EOD;
62 }
63 else {
64 $js=<<<eod $(filter_date).datepicker(jquery.extend({dateformat:'{$this-="">dateFormat}'}, {$options}));
65 EOD;
66 }
67 $js=<<<eod var="" filter_date="#{$this->grid->id} input[class="filter-date"]" ;="" $('body').delegate(filter_date,="" 'mousedown',="" function(){="" {$js}="" });="" eod;="" $cs-="">registerScript(__CLASS__, $js);
68 }
69 else
70 parent::renderFilterCellContent();
71 }
72
73 }
74 </eod></eod></eod>

好，这个类使用了jui的类库，刚好yii自带了这个类库，所以我们也不用其它的js文件了，方便部署，放到components中就可以，
(OK, the class used JUI library.jui build-in Yii,So we do not have other js files.please move the class to protectd/components.)
下面我们设置一个gridview的日期列，示例代码如下：
(e.g. Usage as follows in view file:)
01 'columns'=>array(
02 ...
03
04 'title',
05 array(
06 'header'=>'creation_time',
07 'name'=>'creation_time',
08 'class'=>'SYDateColumn'
09 ),
10 array(
11 'header'=>'update_time',
12 'name'=>'update_time',
13 'filter'=>'single',
14 'class'=>'SYDateColumn'
15 ),
16 array(
17 'class'=>'CButtonColumn',
18 ),
19 ),

这里，指定了使用日期列的类名，SYDateColumn类名以我的名字作为前缀，呵呵。
(Here, using the class name SYDateCloumn of the column. SY is my name.)
现在要说一下，这个类的一个属性
(Now,Introduce property of this class)
$filter=’range’; //默认，会使用一个范围 (default. value is range or single, false,will not show fliter).
$language = false; //这是jquery-ui的语言，中文请指定为zh_CN (jquery-ui language)
$theme = ‘base’; //jquery-ui主题包，yii只有一个base的，这个默认就行了 (jquery-ui theme)
$fromText = ‘From: ‘; //如果使用一个范围，那这个文字会显示在输入框前面 (if $filter is range,that filter inputbox before text)
$toText = ‘To: ‘; //同上(ibid)
$dateFormat = ‘yy-mm-dd’; //日期格式，是datepicker使用的，(dateformat)
$dateInputStyle=”width:70%”; //如果使用范围，会使用这个样式控制输入框 (if $filter is range, inputbox style)
$dateLabelStyle=”width:30%;display:block;float:left;”; //如果使用范围，会使用这个样式控制标签(if $filter is range, text style)
$dateOptions = array(); //需要传给datepicker的一些附加选项。(datepicker additional Options);

ok，再说一下，这个类会自动生成以属性名加_range['from']和_range['to']为name的输入框，如果只用single的话，只有一个to
，
(ok, the class will create attribute name of model and join _range['from'] and/or _range['to'] input name.)
e.g. ‘name’=>’creation_time’, filter input name is create_time_range['from'] and create_time_range['to'])
‘name’=>’creation_time’,
‘filter’=>’single’, filter input name is create_time_range['to'])
好，下面我们改造model
因为加了与数据库字段不相关的model属性，所以这里我们定义一个属性
如上面的示例列。
(OK, we are change model class, Because additional field is not associated with the database, the model attributes, so we define a property)
1 XXXX extends CActionModel
2 {
3 ...
4 public $creation_time_range = array();
5 public $update_time_range = array();
6 ...
7 }

好，下面要把这两个属性加到rules里，作为safe方法，要不model不会把这两个属性赋值，示例代码如下：
(OK, The following rules should add these two properties, the method as a safe, Otherwise, the new property will not be assigned additional.)
1 function rules() {
2 return array(
3 ...
4 array('....., creation_time_range, update_time_range', 'safe', 'on'=>'search'),

现在，我们修改search方法，修改查询条件, 这里因为我的表使用了日期字段。如果你使用其它字段类型请相应修改。
(We modify the query at search method in Module class , the table used the date type field. If you use other field types, please be amended accordingly.)
01 function search() {
02 ...
03
04 //creation_time_range
05 $from = $to = '';
06 if (count($this->creation_time_range)>=1) {
07 if (isset($this->creation_time_range['from'])) {
08 $from = $this->creation_time_range['from'];
09 }
10 if (isset($this->creation_time_range['to'])) {
11 $to= $this->creation_time_range['to'];
12 }
13 }
14
15 if ($from!='' || $to !='') {
16 if ($from!='' && $to!='') {
17 $from = date("Y-m-d", strtotime($from));
18 $to = date("Y-m-d", strtotime($to));
19 $criteria->compare('creation_time',"> $from",true);
20 $criteria->compare('creation_time',"< $to",true);
21 }
22 else {
23 if ($from!='') $creation_time = $from;
24 if ($to != '') $creation_time = $to;
25 $creation_time = date("Y-m-d", strtotime($creation_time));
26
27 $criteria->compare('creation_time', "$creation_time" ,true);
28 }
29 }
30
31 //update_time
32 $to = '';
33 if (isset($this->update_time_range['to'])) {
34 $to= $this->update_time_range['to'];
35 }
36 if ($to!='') {
37 $update_time = date("Y-m-d", strtotime($to));
38 $criteria->compare('update_time',$update_time,true);
39 }
40 }

ok，通过以上修改，日期过滤列就实现了。)