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

Question

好的，我先解释一下我有什么，

--名为cases的数据库表。

这包含了我需要在网格视图中显示的所有案例

--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 请求。然后它将拉回 subcategory_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 是通过 gridview 的 searchModel 和 dataprovider 发送的，如下所示：

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
    ]);
}

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

NOTE::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     
   }

选择最后一个子类别时调用此函数。我知道这里必须发生一些事情才能做到这一点，但我不知道是什么。 有人可以帮忙吗？

Answer 1

<?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() ?>