本想实现Yii自带的CGridView的无刷新检索更新效果,之前以为跟分页(CPagination)和排序(CSort)的实现方法类似,但查了查手册,并不是想象中的那样,只好改为用CListView来实现,查了查官方的guide,说得太模糊了,只有一边看着官方的guide,一边自己摸索着实现,好在成功实现。
程序说明:列表显示中每日报告,根据报告的添加日期来检索报告。
实现过程:
1、要实现这种异步通信过程,必须使用两个页面,父页面renderPartial子页面,子页面显示的就是刷新的列表。父页面代码如下:
$this->widget('zii.widgets.CListView', array( 'dataProvider'=> $dataProvider, 'itemView'=>'_tab3Ajax', 'id'=>'ajaxListView', //注意这个id要的下面注册js中的id一致 'summaryText'=>'' ));
view的名称是_tab3Ajax(页面中使用了CJuiTabs,所以有tab1,tab2,tab3,其它代码不再列出,只贴关键代码)
2、检索框处的代码如下:
echo '日期检索:'; $this->widget('zii.widgets.jui.CJuiDatePicker', array( 'name'=>'keyDate', 'options'=>array( 'dateFormat' => 'yy-mm-dd' ), 'htmlOptions'=>array( 'style'=>'height:15px;' ), ));
还有一个按钮
<input id="search" value="检索" type="button">
注册实现异步通信的js
Yii::app()->clientScript->registerScript('search',' $("#search").click(function(){ var keyDate = $("#keyDate").val(); if(keyDate == ""){ alert("请选择日期!"); return false; }else{ var ajaxRequest; ajaxRequest = $("#keyDate").serialize(); $.fn.yiiListView.update( "ajaxListView", {data: ajaxRequest} ) } }); ');
4、_tab3Ajax中的代码,也就是列表显示页代码就不贴出来了,就是一个循环的表格,直接看Controller中的代码
$report = new DayReport(); $criteria = new CDbCriteria(); $criteria->limit = 10; $criteria->order = 'date desc'; $criteria->with = 'user'; /*关键代码在这里,这里就是异步通信请求的条件*/ if(Yii::app()->request->isAjaxRequest){ $keyDate = isset($_GET['keyDate']) ? $_GET['keyDate'] : false; if($keyDate) $criteria->addSearchCondition('date', $keyDate); } $dataProvider = new CActiveDataProvider('DayReport',array('criteria'=>$criteria)); $this->render('admin',array( 'report' => $report, 'dataProvider' => $dataProvider ));
至此,已经完美实现要求的效果。