使用 WijmoJS 轻松实现撤消重做(Undo Redo)

使用 WijmoJS 轻松实现撤消重做(Undo Redo),第1张

概述使用 WijmoJS 轻松实现撤消重做(Undo /Redo) 在V2019.0 Update2 的全新版本中,WijmoJS能够轻松实现撤消和重做 *** 作,使Web应用程序的使用更加友好、更加高效。 不同于HTML提供的基本的撤销/重做功能 HTML只提供非常基本的撤销/重做功能,甚至这种功能在浏览器中也有不一致的表现,即便有一个HTML UndoManager类,但目前没有任何浏览器实现。   而 使用 WijmoJs 轻松实现撤消重做(Undo /Redo)

在V2019.0 Update2 的全新版本中,WijmoJs能够轻松实现撤消和重做 *** 作,使Web应用程序的使用更加友好、更加高效。

不同于HTML提供的基本的撤销/重做功能

HTML只提供非常基本的撤销/重做功能,甚至这种功能在浏览器中也有不一致的表现,即便有一个HTML UndoManager类,但目前没有任何浏览器实现。

 

而在本次WijmoJs新版本中,我们推出了灵活且易于使用的表单级撤消/重做堆栈类,即带有UndoStack类的“撤销”模块。

WijmoJs 灵活且易于使用的表单级撤消/重做堆栈类

在WijmoJs提供的UI组件中,您可以使用UndoStack类为网页或表单提供撤消/重做功能。并且,UndoStack类将自动监听所有HTML输入元素以及WijmoJs控件,如FlexGrID、组合框、inputDate和仪表盘。

要使用UndoStack类,请创建该类的实例,并将其传递给它应该管理的元素选择器(通常是HTML表单、div或整个页面)。

例如:

```

import { UndoStack } from ‘@grapecity/wijmo.undo‘;

// create the UndoStack

let undoStack = new UndoStack(‘#undoable-form‘,{

    maxActions: 50,

    stateChanged: (s: UndoStack,e) => {

        btnUndo.Disabled = !s.canUndo;

        btnRedo.Disabled = !s.canRedo;

        cnt.textContent = s.actionCount.toString();

    }

});

// hook up undo/redo/clear buttons

btnUndo.addEventListener(‘click‘,() => {

    undoStack.undo();

});

btnRedo.addEventListener(‘click‘,() => {

    undoStack.redo();

});

```

上面的代码创建了一个UndoStack,它可以跟踪响应多达50个动作,并自动监听键盘以处理标准的撤消/重做键(ctrl + Y,ctrl + Z)。

UndoStack的StateChanged事件,可以通过编码的方式定义:启用或禁用撤消/重做按钮,并为按钮绑定撤消和重做方法。

关于 WijmoJs 前端开发工具包

WijmoJS 前端开发工具包由多款灵活高效、零依赖、轻量级的纯前端控件组成,如表格控件 FlexGrID、图表控件 FlexChart、数据分析 olAP 等,完美支持原生 JavaScript,以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可用于企业快速构建桌面、移动 Web 应用程序。

借助葡萄城深厚的技术底蕴,WijmoJs 致力于为各领域用户提供更稳定、更高效的前端开发工具。产品自面市以来,已在招商银行、微软 Dynamics 项目、思科、特斯拉、富士通等知名企业中得以成功应用。WijmoJs 凭借其先进的体系架构、简单易学的使用文档、超过 500 种 Demo 演示、顶级的控件性能,以及轻松、易用的 *** 作体验,可全面满足企业前端开发所需,是构建企业级 Web 应用程序最高效的纯前端开发工具包。

总结

以上是内存溢出为你收集整理的使用 WijmoJS 轻松实现撤消重做(Undo /Redo)全部内容,希望文章能够帮你解决使用 WijmoJS 轻松实现撤消重做(Undo /Redo)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1034186.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存