重做 – 使用角度js撤消大数据的function

目前我正在动态创建一个表,因为多行是动态添加的(类似于Excel)。表可以有数百万行。

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

这是工作演示。

注意 :分页不适合我的情况。我想在滚动上加载数据。

请建议任何其他合适的角度插件或任何其他方式来实现重做/撤消function以及更好的性能。

总而言之,您可以使用Memento Factory添加状态管理。

您需要的所有代码如下,但我的博客上有更多背景: 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(...)对象,传递要跟踪的非原始变量

 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; 

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

   

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

   

......就是这样!