使用TbExtendedGridView ajax过滤更新多个小部件

时间:2014-02-11 14:38:39

标签: jquery yii pdf-generation yii-components

我有3个小部件的视图。 两个TbButton小部件和一个TbExtendedGridView小部件。 按钮用于“插入新用户”和“创建pdf”。 TbExtendedGridView用于列出当前用户及其属性。 TbExtendedGridView已启用过滤功能正常运行。

控制器很简单。它会检测是否存在AjaxRequest。如果有,它会根据GET变量过滤数据。如果没有,它会呈现一个显示所有用户的默认视图。

我需要的是能够创建该表的PDF。

我安装了PDF扩展并创建了PDFReport控制器。当用户点击“创建pdf”按钮时,他会转到该控制器,而不是创建PDF。一切都很好,直到我想用过滤后的数据创建PDF。

我想到的第一件事就是将变量从过滤器传递到“创建pdf”按钮的链接,这样一旦点击它,我就会将相关数据发送到PDFReport控制器,这样就可以过滤数据并创建过滤后的PDF。 / p>

问题是过滤是通过AJAX请求完成的,它只刷新表。按钮小部件未刷新,我不知道如何发送新链接到“创建PDF”按钮。

我不知道如何使这项工作。

控制器操作:

public function actionIndex()
{
    // if submited by filters, get only filtered data
    if( Yii::app()->request->isAjaxRequest && isset($_GET['users']))
    {
        $criteria=new CDbCriteria;
        foreach ($_GET['users'] as $key => $value) {
            if ($value != "") {
                if (preg_match('/^(["\']).*\1$/m', $value)) {
                    $criteria->addInCondition($key,array($value),$operator='AND');
                }
                else
                {
                    $criteria->addsearchCondition($key,$value,$like='LIKE');
                }
            }
        }
        $data=new CActiveDataProvider(
            'users', 
            array(
                'criteria'=>$criteria,
                'pagination' => array('pageSize' => 30)
            )
        );
        $createPDFurl = "test2";
        $this->render('index',array('model'=>$data, 'createPDFurl' => $createPDFurl));
    }
    //else full table
    else
    {
        $data=new CActiveDataProvider(
            'users', 
            array('pagination' => array('pageSize' => 30))
        );
        $createPDFurl = "test1";
        $this->render('index',array('model'=>$data, 'createPDFurl' => $createPDFurl));
    }
}

并查看:

<?php

    $this->widget(
        'bootstrap.widgets.TbButton',
        array(
            'label' => 'Unos novog zaposlenika',
            'type' => 'primary',
            'url' => $createPDFurl,
        )
    );

    $this->widget(
        'bootstrap.widgets.TbButton',
        array(
            'label' => 'Kreiraj PDF',
            'type' => 'primary',
            'url' => $createPDFurl,
        )
    );

    $godisnji_width = "100px";
    $this->widget('bootstrap.widgets.TbExtendedGridView', array(
    'fixedHeader' => true,
    'headerOffset' => 40, // 40px is the height of the main navigation at bootstrap
    'type' => 'striped bordered condensed',
    'dataProvider' => $model,
    'filter' => $model->model,
    'responsiveTable' => true,
    'template' => "{pager}{items}{summary}{pager}\n{extendedSummary}",
    'ajaxUrl'=> $this->createUrl('/site/index'),
    'pager' => array(
        'nextPageLabel' => 'Sljedeća',
        'prevPageLabel' => 'Prijašnja',
        'firstPageLabel' => 'Prva',
        'lastPageLabel' => 'Posljednja'
    ),
    'summaryText' => 'Prikazano {start}-{end} od {count} unosa.',
    'columns' => array(
        'prezime',
        'ime',
        'radno_mjesto',
        'odjel',
        'broj_dana',
        array('name'=>'godisnji', 'htmlOptions'=>array('width' => $godisnji_width), 'headerHtmlOptions'=>array('width' => $godisnji_width), 'filterHtmlOptions'=>array('width' => $godisnji_width)),
        'stari_godisnji',
        'bolovanje',
        array(
            'htmlOptions' => array('nowrap'=>'nowrap'),
            'class'=>'bootstrap.widgets.TbButtonColumn',
        ),
    ),

    ));

echo $createPDFurl;

当您加载索引页面1时,您将获得2个漂亮的按钮和1个充满数据的好表以及该测试变量的回显:“test1”。 当我在过滤器中输入内容时,我的表会更改,但测试变量保持“test1”。我非常肯定我知道为什么,因为Ajax只改变了表,这是好事,因为Ajax存在的原因,但是如何强制它刷新其他小部件或如何将新数据推送到页面的其余部分我没有想法。

1 个答案:

答案 0 :(得分:0)

由于我的答案相当建议很长,我在添加答案而不是在问题下面添加评论 代码的第一件事,您正在使用属性responsiveTable = true。这个属性不会让gridView响应,而是它会反转效果,你可以看到当你手动减小浏览器的宽度它会显示TbGridView但反向效果。它会扭曲列和行的方向。它自己。
对于您的问题TbExtendedGridViewTbGridView延伸。 TbGridViewCgridViewTbDataColumn延伸。现在CgridView有一些关于ajax的公共属性。列为

  • public $ ajaxUpdate;
  • public $ ajaxUpdateError;
  • public $ ajaxVar ='ajax';
  • public $ ajaxUrl;
  • public $ beforeAjaxUpdate;
  • public $ afterAjaxUpdate;

因为您在代码中使用了$ ajaxUrl。现在我认为$ajaxUpdate是您正在寻找的属性。

@var mixed the ID of the container whose content may be updated with an AJAX response.
     * Defaults to null, meaning the container for this grid view instance.
     * If it is set false, it means sorting and pagination will be performed in normal page requests
     * instead of AJAX requests. If the sorting and pagination should trigger the update of multiple
     * containers' content in AJAX fashion, these container IDs may be listed here (separated with comma).

以上几行是$ajaxUpdate。我从yii的官方文档中采用了以上几行。我希望它会对你有所帮助。