重做-使用angular js撤消功能以处理大数据 [英] Redo - Undo functionality using angular js for large data

问题描述

当前我正在动态创建表，因为动态添加了多行(类似于Excel).表可以具有数百万行.

Currently i'm creating a table dynamically, in that multiple rows get added dynamically (Similar to Excel).Table can have millions of rows.

对于重做/撤消功能，我使用了 Angular-Chronicle .现在，当行数达到100时，重做/撤消可以完美地工作.当数据太大时，如何提高重做/撤消性能.

For redo/undo functionality i've used Angular-Chronicle. Now redo/undo working perfectly when rows count is upto 100. How to improve redo/undo performance when data is too large.

此处正在运行演示.

注意:分页不适合我的情况.我想以滚动方式加载数据.

Note : Pagination is not suit for my case.I want to load data on scroll.

请提出任何其他合适的角度插件或其他方法来实现具有更好性能的重做/撤消功能.

Please suggest any other suitable angular plugin or any other way to achieve redo/undo functionality with better performance.

推荐答案

总而言之，您可以添加带有Memento Factory的状态管理.

To summarise, you can add state management with a Memento Factory.

您需要的所有代码都在下面，但我的博客上有更多背景信息: AngularJS Memento Factory .

All the code you need is below, but there's a little more background on my blog: AngularJS Memento Factory.

function MementoFactory(){
  return function() {
    var memento = this;
    // Private properties
    var subjects = arguments; // We can track multiple objects or arrays
    var stack = []; // Each call to "save" makes a copy of every subject on the stack
    var currentIndex = 0; // The "current" position on the stack stack
    // Begin by saving the current state
    save();
    // Public properties
    memento.timestamp = null; // The timestamp for the current stack
    // Public methods
    memento.save = save;
    memento.canUndo = canUndo;
    memento.undo = undo;
    memento.canRedo = canRedo;
    memento.redo = redo;

    function save() {
      var snapshot = {
        timestamp: Date.now(), // The save time
        subjects: [], // Contains each of the subjects
      };
      for (var a = 0, al = subjects.length; a < al; a++) {
        snapshot.subjects.push(angular.copy(subjects[a]));
      }
      if (stack[currentIndex] && angular.equals(stack[currentIndex].subjects, snapshot.subjects)) {
        return; // Do nothing if the new snapshot is the same as the current snapshot
      }
      if (canRedo()) {
        stack = stack.slice(0, currentIndex + 1); // Since we can "redo" we must overwrite that timeline (consider Back To The Future: Part II)
      }
      memento.timestamp = snapshot.timestamp; // Store the time
      stack.push(snapshot);
      currentIndex = stack.length - 1;
    };
    function canUndo() {
      return currentIndex > 0;
    };
    function undo() {
      if (canUndo()) {
        restoreSnapshot(-1);
      }
    };
    function canRedo() {
      return currentIndex < stack.length - 1;
    };
    function redo() {
      if (canRedo()) {
        restoreSnapshot(+1);
      }
    };
    function restoreSnapshot(indexDiff) {
      currentIndex += indexDiff;
      var snapshot = stack[currentIndex];
      memento.timestamp = snapshot.timestamp; // Update the timestamp
      for (var s = 0, sl = snapshot.subjects.length; s < sl; s++) {
        if (snapshot.subjects[s] !== subjects[s]) {
          angular.copy(snapshot.subjects[s], subjects[s]);
        }
      }
    };
  };
};

angular
  .module('app')
  .factory('Memento', MementoFactory);

创建一个新的Memento(...)对象，传递要跟踪的非基本变量

Create a new Memento(...) object, passing the non-primitive variables you want to track

ctrl.user = { name: 'David King', location: 'England' };
ctrl.tags = [ 'AngularJS', 'Angular', 'Firebase' ];
// Create a new Memento object
var memento = new Memento(ctrl.user, ctrl.tags);
// Expose the undo and redo methods
ctrl.canUndo = memento.canUndo;
ctrl.redo    = memento.redo;
ctrl.canRedo = memento.canRedo;
ctrl.undo    = memento.undo;

在视图中添加撤消和重做按钮

Add undo and redo buttons to your View

<button
  type="button"
  ng-click="ctrl.undo()"
  ng-disabled="!ctrl.canUndo">Undo</button>
<button
  type="button"
  ng-click="ctrl.redo()"
  ng-disabled="!ctrl.canRedo">Redo</button>

在适当的时候保存您的Memento对象

Save your Memento object, when appropriate

<input
  type="text"
  ng-model="ctrl.user.name"
  ng-change="ctrl.save()">
<input
  type="text"
  ng-model="ctrl.user.location"
  ng-change="ctrl.save()">

...就是这样！

这篇关于重做-使用angular js撤消功能以处理大数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！