Svelte 中的 ag-Grid 单元格编辑器如何提示用户确认更改？

Question

我在 Svelte 文件中有一个 ag-Grid。 列定义之一是显示到小数点后 2 位的浮点数，如下所示：

const columnDefinitions = [
    ...
    {
        field: fixedScr,
        headerName: "Fixed SCR",
        cellClass: numberCellClassSelector,
        type: "rightAligned",
        width: 150,
        editable: true,
        valueFormatter: numberFormatterFactory(2),
        valueParser: numberParser,
    },
    ...
];

我选择了 ag-Grid 作为显示和编辑这些值的列的便捷方式。但是，我的产品负责人希望网页在用户每次更改单元格时都用“您确定吗？”来质询用户。提示。

也许有点笨拙，因为它会使使用 ag-Grid 的编辑速度稍微慢一些。但这些值不会经常更改，更改时应谨慎。

我将如何定义一个简单的单元格编辑器，仅针对此列，在更新网格之前提示用户确认更改？

Answer 1

我建议绑定到一个 ag-grid 事件中，该事件在值更新后触发。在回调上（应该通过异步函数）。

我的实现将如下创建一个Popup.svelte 组件。

您还将创建一个商店，我将在全局 js 文件中将其称为 popup，例如 store.js。

然后您将从store.js 导入popup 到Popup.svelte。然后将popup 存储的值设置为一个异步函数，该函数将与Popup.svelte 的HTML 交互。此异步函数将返回一个 promise，您将在使用 popup 存储时在其他苗条组件中等待它。

在这个 Promise 中，您将等待所有先前的弹出窗口关闭以显示您当前的弹出窗口，您将提供标题以及将在弹出窗口中显示的按钮的返回值

这是我编写的代码的实现示例

<style>
    .u-overlay {
        min-height: 100vh;
        max-height: 100vh;
        width: 100%;
        position: fixed;
        display: flex;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 50000;
    }

    .u-box {
        width: 500px;
        background-color: white;
        min-height: 100px;
        margin: auto;
        padding: 20px;
        border-radius: 4px;
    }

    .u-title {
        width: 100%;
        text-align: center;
        font-size: 22px;
    }

    .u-desc {
        padding: 20px 20px;
        text-align: center;
        margin: 0;
    }

    .u-buttons {
        width: 100%;
        display: flex;
        padding: 10px 0;
        justify-content: space-evenly;
    }

    .u-over-button {
        width: 150px;
        border: 1px solid transparent;
        border-radius: 4px;
        color: white;
        text-align: center;
        padding: 8px 0;

        -webkit-touch-callout: none; 
        -webkit-user-select: none; 
        -khtml-user-select: none; 
        -moz-user-select: none; 
        -ms-user-select: none; 
        user-select: none;
        cursor: pointer;
    }
</style>


<script>
    import { popup } from "../utils.js";
    import { fade } from "svelte/transition";

    let overlay;
    let template = {
        title: "Write title",
        desc: "Please select",
        buttons: [
            { name: "OK", value: true, color: "#F0F0F0" },
            { name: "Decline", value: false, color: "red" },
        ],
    };
    let popData = undefined;
    let promises = [];
    let colorsConver = {
        ok: "#46b978",
        danger: "#d23149",
    };

    popup.set(async (data) => {
        /* we got a new sub*/
        /* start the promise for the future click */
        let pro = new Promise(async (resolve, reject) => {
            /* make sure all promises before this one are done */
            await Promise.all(promises);
            /* when they are done start the overlay for this sub */

            /* convert text to appropriate hex */
            for (let btn of data.buttons) {
                if (colorsConver[btn.color]) {
                    btn.color = colorsConver[btn.color];
                }
            }
            popData = data;
            setTimeout(() => {
                overlay.addEventListener(
                    "click",
                    (event) => {
                        if (event.target !== event.currentTarget) return;
                        event.stopPropagation();
                        console.log("from overlay");

                        resolve(data.buttons[data.buttons.length - 1].value);
                        popData = undefined;
                    },
                    {
                        once: true,
                        capture: true,
                    }
                );
                for (let b of [
                    ...document.querySelectorAll(".u-overlay .u-buttons"),
                ]) {
                    b.addEventListener(
                        "click",
                        (event) => {
                            event.stopPropagation();
                            console.log("ending button");

                            resolve(event.target.dataset.res);
                            popData = undefined;
                        },
                        {
                            once: true,
                            capture: true,
                        }
                    );
                }
            }, 130);
        });
        /* add this promise so the future ones wait it*/
        promises.push(pro);
        return pro;
    });

    import { popup } from "path/to/store.js";
    const someFunction = () => {
        let resp = await $popup({
            title: "Write title",
            desc: "Please select",
            buttons: [
                { name: "OK", value: true, color: "#F0F0F0" },
                { name: "Decline", value: false, color: "red" },
            ],
        });
    };
</script>


{#if popData}
    <div
        bind:this={overlay}
        transition:fade={{ duration: 150 }}
        class="u-overlay"
    >
        <div on:click|stopPropagation|preventDefault class="u-box">
            <div class="u-title">{popData.title}</div>
            <p class="u-desc">{popData.desc}</p>
            <div class="u-buttons">
                {#each popData.buttons as b}
                    <div
                        data-res={b.value}
                        class="u-over-button"
                        style={"background-color:" + b.color}
                    >
                        {b.name}
                    </div>
                {/each}
            </div>
        </div>
    </div>
{/if}

在其他组件中

<script>
    import { popup } from "path/to/store.js";
    const someFunction = () => {
        let resp = await $popup({
            title: "Write title",
            desc: "Please select",
            buttons: [
                { name: "OK", value: true, color: "#F0F0F0" },
                { name: "Decline", value: false, color: "red" },
            ],
        });
    };
</script>