如何在yii2中使用Pjax更改网格视图?

时间:2015-04-01 10:50:54

标签: php ajax gridview yii2 pjax

好的,生病解释我先拥有的东西,

- 名为案例的数据库表。

这包含了我需要在gridview中显示的所有情况

- 三个名为Category,Subcategory和ChildCategory的表

表格案例中的案例将链接到子类别。

所以我已经从数据库中的各个类别表中填充了三个DropDownLists。例如:

_categories.php

 yii\widgets\Pjax::begin(['id' => 'categories']); 
    $form = ActiveForm::begin();

    echo $form->field($searchModel, 'category')
                ->dropDownList(
                    ArrayHelper::map($allCategory, 'id', 'name'),
                    [
                        'onchange'=>'getSubcategory()',
                    ]
    );

    //To stop errors, if first category not chosen make subcategory and empty drop down.
    $subcategory = array(
        "empty" => ""

    );

    echo $form->field($searchModel, 'subcategory')
                ->dropDownList(
                    ArrayHelper::map($subcategory, 'id', 'name'),
                    [
                       'onchange'=>'getChildcategory()',
                    ]
    );
    //To stop errors, if second category not chosen make childcategory and empty drop down.
    $childcategory = array(
        "empty" => ""
    );
    echo $form->field($searchModel, 'childcategory')
                ->dropDownList(
                    ArrayHelper::map($childcategory, 'id', 'name'),
                    [
                       //'onchange'=>'getChildCategory()',
                        'onchange'=>'submitNow()',
                    ]
    );

    ActiveForm::end();
    yii\widgets\Pjax::end();

那么当选择第一个类别时它会运行“onchange”=> getSubcategory。这基本上会向我的控制器发送一个Ajax请求,其中包含所选选项的值。然后它将拉回subategory_id =所选选项的值的子类别。然后使用此信息填充子类别下拉列表。

此功能在_categories.php上,上面有类别下拉列表

 function getSubcategory(){
        //#casesearch-category is the first drop down list
        var firstcategory = $('#casesearch-category').val();
            var childcategory = document.getElementById('casesearch-childcategory');
            childcategory.options.length = 0;
            $.ajax({
                url: '<?php echo \Yii::$app->getUrlManager()->createUrl('cases/subcategories') ?>',
                type: 'POST',
                dataType: 'json',
                data: { 
                    firstcategory: firstcategory 
                },
                success: function(data) {      

                    var subcategory = document.getElementById('casesearch-subcategory');
                    //if select is changed again, make the options length 0 so that it gets rid of previous appends.
                    subcategory.options.length = 0;


                    for(var i=0; i<data.length; i++){
                        subcategory.options[i] = new Option (data[i].name);
                        subcategory.options[i].value = data[i].subcategory_id;
                    }
                    subcategory.options.selectedIndex = -1;

                   if(subcategory.options.length === 1){
                        getChildcategory();
                    }     
                }
            });
    }

所以当这个ajax请求到达我的控制器时,它会这样做:

CasesController.php

public function actionSubcategories()
{
   if(isset($_POST['firstcategory'])){
        $firstcategory = $_POST['firstcategory'];
        // SELECT * FROM `subcategory` WHERE `parent_id` = $firstcategory
        $subcategory = Subcategory::findSubcategory($firstcategory);

    }

    return \yii\helpers\Json::encode($subcategory);
}

好的,这只是一点点来帮助你理解事物的类别方面。现在我有一个gridview,在提交页面时从数据库中填充。然而,由于我已经完成了ajax来获取我的类别,所以当需要更改类别时,我需要使用pjax更改gridview。

所以在我的控制器中,actionIndex通过searchModel和dataprovider发送给gridview,如下所示:

CasesController.php

public function actionIndex()
{

    $model = new Cases;
    $searchModel = new CaseSearch();  
    $allCategory = Category::find()->all();

    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

    return $this->render('index', [
        'searchModel' => $searchModel,
        'dataProvider' => $dataProvider,
        'allCategory' => $allCategory,
        'model' => $model
    ]);
}

然后在我的索引页面上显示网格视图在这里::

注意:: Index.php呈现上面显示的类别下拉列表_categories.php

 <?= $this->render('_categories', [
    'model' => $model,
    'searchModel' => $searchModel,
    'allCategory' => $allCategory
]) ?>

<?php Pjax::begin(['id' => 'cases']) ?>
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        'case_id',
        'name',
        'judgement_date',
        'year',
        'neutral_citation',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>
<?php Pjax::end() ?>

好的,这就是我被卡住的部分!我假设我要做的是以某种方式更新gridview的searchModel和dataProvider,但我不确定如何做到这一点。好像我向控制器发送一个ajax请求来更改它,然后它将再次渲染页面,这会破坏目标。

位于_categories.php

的顶部
function submitNow(){
            $.pjax.reload({container:"#cases"});  //Reload GridView     
   }

当选择最后一个子类别时,将调用此函数。我知道必须在此处执行此操作但我不知道是什么。 有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

<?php use yii\widgets\Pjax; ?>



<?php Pjax::begin() ?>
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        'case_id',
        'name',
        'judgement_date',
        'year',
        'neutral_citation',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>
<?php Pjax::end() ?>