如何使用 OctoberCMS 使用 AJAX 更新管理步骤中的数据透视字段？

Question

在将相关记录链接到主记录后，我尝试能够从服务器获取数据透视数据的一些值。下面是输入pivot数据的步骤，应该会生成一些数据（手动输入没问题，问题是通过AJAX）：

这里有一个相关的例子fields.yaml

fields:
    pivot[sort]:
        label: Order
        type: number
        span: auto
    pivot[time_from_start_to_sight]:
        label: Time from start to the sight
        type: number
        span: auto
    pivot[add_route_time]:
        label: Add time
        type: number
        span: auto
    pivot[add_route_price]:
        label: Basic add. price
        type: number
        span: auto
    pivot[stay_time_default]:
        label: Default stay time
        type: number
        span: auto
    pivot[stay_time_min]:
        label: Min. stay time
        type: number
        span: auto
    pivot[stay_price]:
        label: Price per quarter of hour
        type: number
        span: auto
    _gmaps_sync:
        label: You may try to get data from Google Maps API
        type: gmapsroutesightsync
        commentAbove: Make sure you have entered Google Maps API key

如您所见，我添加了一个自定义小部件以便能够绘制按钮。我什至可以调用小部件的 AJAX 处理程序并将新值应用于传递的数据，将它们保存到控制器内的数据库中。

但我完全不知道如何推送更新的部分或用新值更新部分。当然可以通过无组织的 JS 代码更新每个字段 - 但我相信有一个聪明的方法。

请指出最佳做法。谢谢。

Answer 1

可能您需要更新您的部分表单，将其从更新所有数据并保存的控制器中推送。

我想对于数据透视表，您已经定义了将要呈现的部分 "relations"，因此您可以更新该部分。

当你使用 October 的 ajax 框架进行 ajax 调用时，你可以使用类似

的东西

data-request-update="relation: '#Form-relationClassesManagePivotForm'

或

如果以编程方式触发请求，您可以

$.request('onRefreshTime', {
    update: { relation: '#Form-relationClassesManagePivotForm' }
})

您可以在此处查看 api 的详细信息：https://octobercms.com/docs/ajax/update-partials

这里我的枢轴关系名称是 "classes" 所以 id 是这样生成的，但是你可以检查元素以获得正确的 id 它会在 "modal-body".

现在从控制器你只需要推送更新的部分，它会自动更新。

function onRefreshTime()
{
    return [
        '#Form-relationClassesManagePivotForm' => $this->renderPartial('pivot_form')
        // or 'relation' => $this->renderPartial('pivot_form')
    ];
}

这里最好在呈现页面的同一控制器上编写此方法，因为它已经定义了关系定义，因此关系小部件已经构建。

如有任何困惑，请在评论中告诉我。

更新

您需要在更新字段的控制器中添加此代码

return ['#myform' => $this->asExtension('RelationController')->onRelationClickManageListPivot()];

并且您需要从关系管理器中添加一个部分覆盖它。 你可以看到我正在添加 custm id = 'id'=>"myform"

_relation_pivot_form.htm (copy from relation manager and paste in your controller folder)

<?php if ($relationManageId): ?>

    <?= Form::ajax('onRelationManagePivotUpdate', [
        'data' => ['_relation_field' => $relationField, 'manage_id' => $relationManageId],
        'data-popup-load-indicator' => true,
        'id'=>"myform"
    ]) ?>

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="popup">&times;</button>
            <h4 class="modal-title"><?= e(trans('backend::lang.relation.related_data', ['name'=>trans($relationLabel)])) ?></h4>
        </div>
        <div class="modal-body">
            <?= $relationPivotWidget->render(['preview' => $this->readOnly]) ?>
            <button
                type="button"
                data-request="onPivotRefresh"
                class="btn btn-primary">
                Refresh Partial
            </button>

        </div>
        <div class="modal-footer">
            <?php if ($this->readOnly): ?>
                <button
                    type="button"
                    class="btn btn-default"
                    data-dismiss="popup">
                    <?= e(trans('backend::lang.relation.close')) ?>
                </button>
            <?php else: ?>
                <button
                    type="submit"
                    class="btn btn-primary">
                    <?= e(trans('backend::lang.relation.update')) ?>
                </button>
                <button
                    type="button"
                    class="btn btn-default"
                    data-dismiss="popup">
                    <?= e(trans('backend::lang.relation.cancel')) ?>
                </button>
            <?php endif ?>
        </div>

    <?= Form::close() ?>

<?php else: ?>

    <?= Form::ajax('onRelationManagePivotCreate', [
        'data' => ['_relation_field' => $relationField, 'foreign_id' => $foreignId],
        'data-popup-load-indicator' => true
    ]) ?>

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="popup">&times;</button>
            <h4 class="modal-title"><?= e(trans('backend::lang.relation.related_data', ['name'=>trans($relationLabel)])) ?></h4>
        </div>
        <div class="modal-body">
            <?= $relationPivotWidget->render() ?>
        </div>
        <div class="modal-footer">
            <button
                type="submit"
                class="btn btn-primary">
                <?= e(trans('backend::lang.relation.add')) ?>
            </button>
            <button
                type="button"
                class="btn btn-default"
                data-dismiss="popup">
                <?= e(trans('backend::lang.relation.cancel')) ?>
            </button>
        </div>

    <?= Form::close() ?>

<?php endif ?>

我认为它应该完成您的工作。如果它不起作用，那么我需要你的代码 ;)

如何使用 OctoberCMS 使用 AJAX 更新管理步骤中的数据透视字段？

How can I update pivot fields on Manage step with AJAX with OctoberCMS?

ajax

octobercms

octobercms-backend

更新