本想实现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
));至此,已经完美实现要求的效果。