如何解决Svelte 中的 ag-Grid 单元格编辑器如何提示用户确认更改？
我在 Svelte 文件中有一个 ag-Grid。 列定义之一是显示到小数点后两位的浮点数，如下所示：
const columnDefinitions = [
...
{
field: fixedScr,headerName: "Fixed SCR",cellClass: numberCellClassSelector,type: "rightAligned",width: 150,editable: true,valueFormatter: numberFormatterFactory(2),valueParser: numberParser,},...
];
我选择了 ag-Grid 作为显示和编辑这些值的列的便捷方式。但是，我的产品负责人希望网页在用户每次对单元格进行更改时都向他们发出“您确定吗？”的挑战。提示。
也许有点笨手笨脚，因为它会使使用 ag-Grid 的编辑速度稍慢。但这些值很少会发生变化，需要谨慎更改。
我将如何定义一个简单的单元格编辑器，仅针对此列，它会在更新网格之前提示用户确认更改？
解决方法
我建议绑定到一个 ag-grid 事件，该事件在值更新时触发。在回调上（应该通过异步函数）。
我的实现将如下创建一个 Popup.svelte 组件。
您还将创建一个商店，我将在全局 js 文件中将其称为 popup，例如 store.js。
然后您将从 popup 中的 store.js 导入 Popup.svelte。然后您将 popup 存储的值设置为异步函数，该函数将与 Popup.svelte 的 HTML 交互。此异步函数将返回一个 promise，您将在使用 popup 存储时在其他 svelte 组件中等待该 <style>
.u-overlay {
min-height: 100vh;
max-height: 100vh;
width: 100%;
position: fixed;
display: flex;
background-color: rgba(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,}
);
}
},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",buttons: [
{ name: "OK",});
};
</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}
。
在这个 Promise 中，您将等待所有以前的弹出窗口关闭以显示您当前的弹出窗口，您将提供标题，以及将显示在弹出窗口中的按钮的返回值
这是我编写的代码的实现示例
<script>
import { popup } from "path/to/store.js";
const someFunction = () => {
let resp = await $popup({
title: "Write title",});
};
</script>
在其他组件中
{{1}}版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
