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

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

<php
Yii::import('zii.widgets.grid.CDataColumn');

class SYDateColumn extends CDataColumn
{

	/**
	 * if filter is false then no show filter
	 * else if filter is 'range' string then show from input to input
	 * else if filter is 'single' string then show input
	 * @var mixed
	 */
	public $filter='range';

	public $language = false;

	/**
	 * jquery-ui theme name
	 * @var string
	 */
	public $theme = 'base';

	public $fromText = 'From: ';

	public $toText = 'To: ';

	public $dateFormat = 'yy-mm-dd';

	public $dateInputStyle="width:70%";

	public $dateLabelStyle="width:30%;display:block;float:left;";

	public $dateOptions = array();

	/**
	 * Renders the filter cell content.
	 */
	protected function renderFilterCellContent()
	{
		if($this->filter!==false && $this->grid->filter!==null && $this->name!==null && strpos($this->name,'.')===false)
		{

			$cs=Yii::app()->getClientScript();
			$cs->registerCssFile($cs->getCoreScriptUrl().'/jui/css/'. $this->theme .'/jquery-ui.css');
			if ($this->language!==false) {
				$cs->registerScriptFile($cs->getCoreScriptUrl().'/jui/js/jquery-ui-i18n.min.js');
			}
			$cs->registerScriptFile($cs->getCoreScriptUrl().'/jui/js/jquery-ui.min.js');

			if ($this->filter=='range') {
				echo CHtml::tag('div', array(), "". $this->fromText ."" . CHtml::activeTextField($this->grid->filter, $this->name.'_range[from]', array('style'=>$this->dateInputStyle, 'class'=>'filter-date')));
				echo CHtml::tag('div', array(), "". $this->toText ."". CHtml::activeTextField($this->grid->filter, $this->name.'_range[to]', array('style'=>$this->dateInputStyle, 'class'=>'filter-date')));
			}
			else {
				echo CHtml::tag('div', array(), CHtml::activeTextField($this->grid->filter, $this->name.'_range[to]', array('class'=>'filter-date')));
			}
			$options=CJavaScript::encode($this->dateOptions);

			if ($this->language!==false) {
$js=<<dateFormat}'}, jQuery.datepicker.regional['{$this->language}'], {$options}));
EOD;
			}
			else {
$js=<<dateFormat}'}, {$options}));
EOD;
			}
$js=<<registerScript(__CLASS__, $js);
	}
		else
			parent::renderFilterCellContent();
	}

}

好,这个类使用了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:)

	'columns'=>array(
...

		'title',
		array(
		    'header'=>'creation_time',
		    'name'=>'creation_time',
		    'class'=>'SYDateColumn'
		),
		array(
		    'header'=>'update_time',
		    'name'=>'update_time',
		    'filter'=>'single',
		    'class'=>'SYDateColumn'
		),
		array(
			'class'=>'CButtonColumn',
		),
	),

这里,指定了使用日期列的类名,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)

XXXX extends CActionModel
{
...
	public $creation_time_range = array();
	public $update_time_range = array();
...
}

好,下面要把这两个属性加到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.)

function rules() {
  return array(
        ...
      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.)

function search() {
...

		//creation_time_range
		$from = $to = '';
		if (count($this->creation_time_range)>=1) {
			if (isset($this->creation_time_range['from'])) {
				$from = $this->creation_time_range['from'];
			}
			if (isset($this->creation_time_range['to'])) {
				$to= $this->creation_time_range['to'];
			}
		}

		if ($from!='' || $to !='') {
			if ($from!='' && $to!='') {
				$from = date("Y-m-d", strtotime($from));
				$to = date("Y-m-d", strtotime($to));
				$criteria->compare('creation_time',"> $from",true);
				$criteria->compare('creation_time',"< $to",true);
			}
			else {
				if ($from!='') $creation_time = $from;
				if ($to != '') $creation_time = $to;
				$creation_time = date("Y-m-d", strtotime($creation_time));

				$criteria->compare('creation_time', "$creation_time" ,true);
			}
		}

		//update_time
		$to = '';
		if (isset($this->update_time_range['to'])) {
			$to= $this->update_time_range['to'];
		}
		if ($to!='') {
			$update_time = date("Y-m-d", strtotime($to));
			$criteria->compare('update_time',$update_time,true);
		}
}

ok,通过以上修改,日期过滤列就实现了。)
(ok, completed.)

Posted on by Syang

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

  1. While all these applications are easy, the method of payment should be clear from the very beginning.

发表评论

电子邮件地址不会被公开。 必填项已被标记为 *

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>