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