Yii GridView Ajax更新无法正常工作

时间:2014-10-23 07:32:21

标签: javascript jquery ajax yii cgridview

我的应用中有一个包含CGridView的页面。用户可以通过填写表单并单击“提交”按钮来搜索数据。搜索功能正常工作,CGridView已成功更新。问题是它不能通过ajax来完成,Yii继续通过URL中的参数来完成它。

我想通过ajax更新CGridView,所以URL仍然很好看。这是我的代码。

查看档案

<?php
Yii::app()->clientScript->registerScript('search', "
    $('.btn-link').click(function(){
            $('.section').toggle();
            return false;
    });

    $('.section form').submit(function(){
    $('#customer2-grid').yiiGridView('update', {
        data: $(this).serialize()
    });

    return false;
    });
");
?>

<?php echo CHtml::link('Advanced Search','#',array('class'=>'btn-link')); ?>

<div class="section" style="display:none">
    <?php $this->renderPartial('_search',array(
        'model'=>$model,
    )); ?>
</div><!-- search-form -->

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'customer2-grid',
    'dataProvider'=>$model->search(),
    'htmlOptions'=>array('style'=>'font-weight:bold'),
    'filter'=>$model,
    'columns'=>array(

        'NAME',
        'BIRTHDATE',
        'ADDRESS',
        'EMAIL',

        array(
            'header'=>'Action',
                        'class'=>'CButtonColumn',
                        'template' => '{add} {updates}',
                        'buttons' => array(
                                    'add' => array(
                                        'label' => '',
                                        //'imageUrl' => Yii::app()->request->baseUrl.'/images/icon/add.png',
                                        'url' => 'Yii::app()->createUrl("/goods/create/",array("id"=>$data->ID))',
                                        'options'=>array('class'=>'btn btn-info', 'style'=> 'margin-bottom:2px  '),
                                         ),

                                      'updates' => array(
                                          'label' => 'Update Profil',
                                         // 'imageUrl' => Yii::app()->request->baseUrl.'/images/icon/update.png',
                                          'url' => 'Yii::app()->createUrl("/customer/update/",array("id"=>$data->ID))',
                                          'options'=>array('class'=>'btn btn-info'),
                                          ),    


                         ),
        ),
    ),
));
?>

这是我的_search.php代码

<div class="form-horizontal">

<?php $form=$this->beginWidget('CActiveForm', array(
    'action'=>Yii::app()->createUrl($this->route),
    'method'=>'get',
)); ?>



    <div class="form-group">
        <?php echo $form->labelEx($model,'NAME',array('class'=>'col-sm-2 control-label')); ?>
        <div class="col-sm-6">
            <?php echo $form->textField($model,'NAME',array('size'=>60,'maxlength'=>128,'class'=>'form-control')); ?>
        </div>
    </div>

    <div class="form-group">
        <?php echo $form->labelEx($model,'BIRTHDATE',array('class'=>'col-sm-2 control-label')); ?>
        <div class="col-sm-6">
            <?php echo $form->textField($model,'BIRTHDATE',array('class'=>'form-control')); ?>
        </div>
    </div>

    <div class="form-group">
        <?php echo $form->labelEx($model,'ADDRESS',array('class'=>'col-sm-2 control-label')); ?>
        <div class="col-sm-6">
            <?php echo $form->textField($model,'ADDRESS',array('size'=>60,'maxlength'=>512,'class'=>'form-control')); ?>
        </div>
    </div>

    <div class="form-group">
        <?php echo $form->labelEx($model,'EMAIL',array('class'=>'col-sm-2 control-label')); ?>
        <div class="col-sm-6">
            <?php echo $form->textField($model,'EMAIL',array('size'=>60,'maxlength'=>64,'class'=>'form-control')); ?>
        </div>
    </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <?php echo CHtml::submitButton('Search', array('class'=>'btn btn-primary')); ?>
        </div>
    </div>


<?php $this->endWidget(); ?>

</div><!-- search-form -->

这是我的控制器代码

public function actionAdmin()
    {       
                $this->layout = '//layouts/column1';
        $model=new Customer('search');

        $model->unsetAttributes();  // clear any default values
        if(isset($_GET['Customer']))
            $model->attributes=$_GET['Customer'];

        $this->render('admin',array(
            'model'=>$model,
        ));
    }

jQuery中的toggle函数工作正常,但更新函数不起作用。 CGridView中的排序功能也可以。我在这里想念什么?

CSS对jQuery / CGridView有什么限制吗?我认为CSS Selector出现了问题

编辑: 我发现layout/main.php出乎意料的问题 我已经包含了三个javascript文件,其中一个导致错误。

<!-- JAVASCRIPTS -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- JQUERY -->
    <script src="<?php echo Yii::app()->request->baseUrl; ?>/css/default/js/jquery/jquery-2.0.3.min.js"></script>
    <!-- JQUERY UI-->
    <script src="<?php echo Yii::app()->request->baseUrl; ?>/css/default/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
    <!-- BOOTSTRAP -->
    <script src="<?php echo Yii::app()->request->baseUrl; ?>/css/default/bootstrap-dist/js/bootstrap.min.js"></script>

在我放弃第一个脚本之后,一切都很好。但是,我不知道为什么。也许有人可以解释原因。任何解释将不胜感激。对不起,如果这个问题超出主题

1 个答案:

答案 0 :(得分:1)

好的我尝试描述常见的解决方案

此代码使用默认的gii crud生成器进行示例

让您拥有带有标准gii模块的模型Customer.php generetad

class Customer extends CActiveRecord 
{
    // ...

    public function search() {
        return new CActiveDataProvider(
            // provider properties
            'criteria' => new CDbCriteria(), // searches and filters
            'sort' => new CSort(), //  ordering
            'pagination' => new CPagination(), //  pagging
        );
    }

    // also there are exists rules for search scneario

    public function rules() {
        return array(
            // ... some other rules

            // rule for scenario search
            array('NAME, BIRTHDATE,ADDRESS, EMAIL', 'safe', 'on'=>'search'),
        );
    }

    // ...
}

接下来我们应该描述原始控制器

class CustomerController extends CController 
{
    public function actionIndex()
    {
        // create model with scenario search
        $model = new Customer('search');

        // check for incoming filter requests and apply filter
        if(isset($_GET['Customer']) {
            $model->attributes = $_GET['Customer'];
        }

        $this->render('index', array('model'=>$model);
    }
}

现在我们必须使用基本的CGridView设置创建最简单的视图

<?php $this->widget('zii.widgets.grid.CGridView', array(
          'provider' => $model->search(),
          // this property automatically add search field above each columns
          'filter' => $model,

      ));

试试这段代码。并且你不需要通过指定自定义搜索表单来创建现有的解决方案,当然如果你想要扩展的搜索工具,你需要一些硬编码