Question

我有一个以下的GridView，但遗憾的是，如果我使用Pjax分页或搜索，Bootstrap模式不能正常工作。嗯，模态确实显示，但它不会提交表单。当我将模态从Pjax（）中删除时，它根本就没有加载。

        Pjax::begin(['id' => 'pjax_id', 'timeout' => false, 'enablePushState' => false]);
        echo GridView::widget([
            'dataProvider' => $details,
            'filterModel' => $searchModel,
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],
                ['format' => 'raw',
                'label' => 'Category',
                'value' => function ($data) {
                    $string = '';
                    foreach ($data['Category'] as $category) {
                        $string .= $category->category_name . '<br/>';
                    }
                    return $string;
                }],
                'book_name',            
                ['format' => 'raw',
                'contentOptions' => ['class' => 'form-cell'],
                'label' => '',
                'value' => function ($data) {
                    $buttons = Html::button('Edit', ['class' => 'btn btn-default mleft modallink', 'data-toggle' => 'modal', 'data-target' => '#'.$data->cat_id]);
                    return $buttons;
                }
                ],
                [
                'format' => 'raw',
                'label' => '',
                'value' => function ($data) {
                    if (Yii::$app->user->identity->user_type == 'admin') {
                        $string = '<a href=\''.Url::to(['category/view', 'id' => $data->cat_id]).'\'><span class="glyphicon glyphicon-eye-open"></span></a>';
                        $string .= '<a class=\'mleft\' href=\''.Url::to(['category/update', 'id' => $data->cat_id]).'\'><span class="glyphicon glyphicon-pencil"></span></a>';
                        return $string;
                    }
                }
                ],
            ],
        ]); 

        $details = $details->getModels();
        foreach ($details as $detail) {
            ?>
            <div class="modal fade" id="<?= $detail->cat_id ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><?= $detail->category_name ?></h4>
                  </div>
                  <div class="modal-body">
                        <?php

                        echo Html::beginForm(Url::to(['category/details', 'id' => $detail->cat_id]), 'post', ['id' => 'popup']);
                        echo Html::beginTag('div', ['class' => 'form-group']);
                        echo Html::activeLabel($detail, 'cat_description');
                        echo Html::activeTextarea($detail, 'cat_description', ['class' => 'form-control']);
                        echo Html::endTag('div');
                        echo Html::beginTag('div', ['class' => 'form-group']);
                        echo Html::activeLabel($detail, 'link');
                        echo Html::activeInput('text', $detail, 'link', ['class' => 'form-control']);
                        echo Html::endTag('div');
                        echo Html::beginTag('div', ['class' => 'form-group']);
                        echo Html::activeLabel($detail, 'resource');
                        echo Html::activeInput('text', $detail, 'resource', ['class' => 'form-control']);
                        echo Html::endTag('div');

                        ?>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <?= Html::submitButton('Submit', ['class' => 'btn btn-success']) ?>
                    <?= Html::endForm(); ?>
                  </div>
                </div>
              </div>
            </div>
            <?php
        }
        Pjax::end();

那么如何保持GridView的Pjax功能以便模态仍然有效？

Answer 1

Pjax小部件有一个formSelector属性，默认情况下会找到data-pjax属性设置为非虚假的所有表单。

修复表单的最简单方法是将该属性添加到表单定义中：

echo Html::beginForm(
    Url::to(['category/details', 'id' => $detail->cat_id]),
    'post',
    [
        'id' => 'popup',
        'data-pjax' => 1,
    ]
);

Bootstrap3 Modal无法使用GridView的pjax

1 个答案: