Yii2中如何通过按钮点击重新加载包含Widget的Div区块？

咱们直接来一步步搞定这个需求：给每个Pjax区块里的Widget加专属刷新按钮，点击后只刷新当前区块，不影响页面其他部分。

1. 给控制器新增刷新专用动作 #

首先得在控制器里加一个专门处理Widget刷新的action，这样后端能精准返回对应Widget的内容，而不是整个页面：

public function actionIndex() {
    return $this->render('index');
}

// 新增：处理Widget刷新的动作
public function actionRefreshWidget($widgetKey) {
    // 根据传入的widgetKey渲染对应的Widget局部视图
    switch ($widgetKey) {
        case 'userStats':
            return $this->renderAjax('_userStatsWidget'); // 假设你的Widget放在局部视图里
        case 'orderList':
            return $this->renderAjax('_orderListWidget');
        // 其他Widget依次添加分支
        default:
            throw new NotFoundHttpException('指定的Widget不存在');
    }
}

这里用renderAjax()而非render()，因为它会自动适配Pjax的响应格式，不会返回完整页面布局。

2. 调整视图里的Pjax容器和刷新按钮 #

每个Widget必须包裹在独立的Pjax容器中，并且给容器设置唯一ID，同时修改按钮的路由和data-pjax属性：

比如第一个Widget的代码：

<?php Pjax::begin(['id' => 'userStats-pjax', 'linkSelector' => '#refresh-userStats']); ?>
    <!-- 你的Widget内容 -->
    <?= $this->widget(\app\widgets\UserStatsWidget::class) ?>
    <!-- 刷新按钮 -->
    <?= Html::a("Обновить", ['refresh-widget', 'widgetKey' => 'userStats'], [
        'id' => 'refresh-userStats',
        'class' => 'btn btn-sm btn-default',
        'data-pjax' => '#userStats-pjax'
    ]) ?>
<?php Pjax::end(); ?>

第二个Widget同理：

<?php Pjax::begin(['id' => 'orderList-pjax', 'linkSelector' => '#refresh-orderList']); ?>
    <?= $this->widget(\app\widgets\OrderListWidget::class) ?>
    <?= Html::a("Обновить", ['refresh-widget', 'widgetKey' => 'orderList'], [
        'id' => 'refresh-orderList',
        'class' => 'btn btn-sm btn-default',
        'data-pjax' => '#orderList-pjax'
    ]) ?>
<?php Pjax::end(); ?>

3. 关键配置说明 #

• 唯一Pjax ID：每个容器的id必须独一无二，这样data-pjax才能精准定位到要刷新的区块。
• linkSelector：指定触发Pjax的按钮选择器，避免页面上其他链接误触发Pjax刷新。
• 路由参数：通过widgetKey告诉后端要刷新哪个Widget，后端根据参数返回对应内容。
• renderAjax()：确保返回纯Widget HTML，不带布局，让Pjax能正确替换区块内容。

替代方案（无需新增action） #

如果不想单独加action，也可以在原actionIndex里判断Pjax请求，直接返回对应Widget：

public function actionIndex($widgetKey = null) {
    if (Yii::$app->request->isPjax && $widgetKey) {
        switch ($widgetKey) {
            case 'userStats':
                return $this->renderAjax('_userStatsWidget');
            case 'orderList':
                return $this->renderAjax('_orderListWidget');
            default:
                throw new NotFoundHttpException();
        }
    }
    return $this->render('index');
}

对应的按钮路由改成：

<?= Html::a("Обновить", ['index', 'widgetKey' => 'userStats'], [
    'id' => 'refresh-userStats',
    'class' => 'btn btn-sm btn-default',
    'data-pjax' => '#userStats-pjax'
]) ?>

这种方式适合Widget数量不多的场景，不用额外新增action。

内容的提问来源于stack exchange，提问作者Jens