Yii2:如何在Gridview外部渲染Pjax内容,使用Gridview按钮

时间:2017-06-06 23:05:39

标签: button gridview yii2 pjax

问题

对于有这个问题的人,我会为你省事。

总结:Pjax linkSelector必须指向<一个> 锚元素,否则您将收到一个未捕获的jquery错误。

Pjax Button vs Link Tag

我遇到的问题是使用Pjax更新Gridview Widget之外的内容。我使用Html :: button添加了一个自定义按钮,但是pjax因为未知原因而失败。

当使用本地按钮使用'class'=>'yii \ grid \ ActionColumn'在gridview小部件上测试pjax时,pjax会刷新就好了,这让我有些困惑。我没有意识到的是pjax linkSelector仅适用于<一个> 元素,linkSelector不能用于<使用Html :: button(...)时生成的按钮> 元素; 。

  

收到此错误:未捕获的$ .fn.pjax或$ .pjax.click需要一个锚元素。

视图

  

文件位置: app / views / default / pjax-example.php

[Pjax代码]

<?php Pjax::begin([
    'id'=>'p0',
    'timeout' => false,
    //Selector must target the <a> anchor.      
    'linkSelector'=>'.action-select', 
]); ?>
<?php Pjax::end(); ?>

[Gridview小工具代码]

$data = [
    ['step_id' => 1, 'step_name' => 'Step A'],
    ['step_id' => 2, 'step_name' => 'Step B'],
    ['step_id' => 3, 'step_name' => 'Step C'],
];
$dataProvider = new ArrayDataProvider([
    'allModels' => $data,
    'sort' => [
       'attributes' => ['id', 'name'],
    ],
]);
echo GridView::widget([
    'dataProvider' => $dataProvider,
    'tableOptions' => [
        'class' => 'table',
    ],
    'columns' => [
        'step_id',
        'step_name',
        [
            'class' => 'yii\grid\DataColumn',
            'label' => 'Button-1',
            'format'=> 'raw',
            'value' => function ($url, $data) {
                return Html::a(
                    '<span class="glyphicon glyphicon-flash"></span>',
                    Url::to(['default/select', 'id'=>$data['step_id']]),
                    [
                        'class' => 'btn btn-danger btn-xs action-select',
                        'data-pjax'=> 'p0', // We must specify the pjax ID.
                    ]
                );
            },
        ],
        [
            'class' => 'yii\grid\ActionColumn',
            'template' => '{select}',
            'header' => 'Button-2',
            'buttons' => [
              'select' => function ($url, $data) {
                return Html::Button(
                  '<span class="glyphicon glyphicon-pencil"></span>',
                  ['value' => Url::to(['default/select', $data['step_id']]),
                    'class' => 'btn btn-danger btn-xs action-select',
                    'data-pjax'=> 'p0',
                ]);
              },
            ],
        ],
    ],
]);

控制器

  

文件位置: app / controllers / defaultController.php

public function actionSelect()
{
    $random_val = 'Rand_01: ' . rand(10,100);
    return $random_val;
}

public function actionPjaxExample()
{
    $random_val = 'Rand_02: ' . rand(10,100);
    return $this->render('pjax-example', [
        'random_val' => $random_val
    ]);
}

1 个答案:

答案 0 :(得分:0)

我正在使用没有链接选择器的这段代码。而且也没有data-pjax=0

views / tranlate / index.php

<?php Pjax::begin(['id' => 'translate-grid', 'timeout' => false, 'enablePushState' => true]) ?>
# here you form
<?php $form = ActiveForm::begin(['action'=> Url::current(),'id'=>'edit-form']) ?>
      <?= $form->field($model, 'word')->textInput() ?>
<?php ActiveForm::end() ?>
<?= GridView::widget([
           'id' => 'data-grid',
           'dataProvider' => $dataProvider,
           'columns'      => [
              [
                'attribute' => 'title',
                'format'    => 'raw',
                'value'     => function ($model) {
                    return Html::a($name, [                                                                    
                        'id' => $model->id
                    ]);
                 },
              ],
           ]
     ]) ?>
<?php Pjax::end() ?>

controllers / TranalteController.php

public function actionIndex($id = false)
{
    $searchModel = new TranslateSearch();
    $model       = $id ? $this->findModel($id) : new Translate();

    if ($model->load(Yii::$app->request->post())) {
        if ($model->save()) {
            return $this->redirect(Yii::$app->request->getReferrer());
        }
    }

    return $this->render('index', [
        'model'        => $model,
        'searchModel'  => $searchModel,
        'dataProvider' => $searchModel->search(Yii::$app->request->get()),
    ]);
}