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


How to change Grid View using Pjax in yii2?

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

--一个名为cases的数据库表

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

-称为Category、Subcategory和ChildCategory的三个表

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

因此,我制作了三个DropDownList,它们是从数据库中的各个类别表中填充的。例如:

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

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

因此,在我的控制器中,actionIndex是通过searchModel和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     
   }

当选择最后一个子类别时,会调用此函数。我知道要做到这一点必须要做些什么,但我不知道是什么。有人能帮忙吗?

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