Yii调用ajax无刷新检索CListView数据

汉王 Yii 2016年09月09日 收藏

本想实现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
));

至此,已经完美实现要求的效果。