不同类型的属性可以按不同的风格编辑。

每个编辑单元可以设置不同的验证方法。
历史编辑可以撤销。
 
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SlickGrid example 3b: Editing with undo</title>
<link rel="stylesheet" href="../css/slick.grid.css" type="text/css" />
<link rel="stylesheet"
href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
<link rel="stylesheet" href="../css/examples.css" type="text/css" />
<style>
.cell-title {
font-weight: bold;
}
 
.cell-effort-driven {
text-align: center;
}
</style>
</head>
<body>
<div style="position: relative">
<div style="width: 600px;">
<div id="myGrid" style="width: 100%; height: 500px;"></div>
</div>
 
<div class="options-panel">
<h2>Demonstrates:</h2>
<ul>
<li>Using "editCommandHandler" option to intercept edit
commands and implement undo support</li>
</ul>
 
<h2>Controls:</h2>
<button onclick="undo()">
<img src="../images/arrow_undo.png" align="absmiddle"> Undo
</button>
</div>
</div>
 
<script src="../js/firebugx.js"></script>
<script src="../js/jquery-1.7.min.js"></script>
<script src="../js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../js/jquery.event.drag-2.0.min.js"></script>
<script src="../js/slick.core.js"></script>
<script src="../js/slick.formatters.js"></script>
<script src="../js/slick.editors.js"></script>
<script src="../js/slick.grid.js"></script>
 
<script type="text/javascript">
//验证方法
function requiredFieldValidator(value) {
if (value == null || value == undefined || !value.length) {
return {
valid : false,
msg : "This is a required field"
};
} else {
return {
valid : true,
msg : null
};
}
}
 
var grid;
var data = [];
//定义列，不同的列可以设置不同的编辑风格和验证方法
var columns = [ {
id : "title",
name : "Title",
field : "title",
width : 120,
cssClass : "cell-title",
editor : Slick.Editors.Text,
validator : requiredFieldValidator
}, {
id : "desc",
name : "Description",
field : "description",
width : 100,
editor : Slick.Editors.LongText
}, {
id : "duration",
name : "Duration",
field : "duration",
editor : Slick.Editors.Text
}, {
id : "%",
name : "% Complete",
field : "percentComplete",
width : 80,
resizable : false,
formatter : Slick.Formatters.PercentCompleteBar,
editor : Slick.Editors.PercentComplete
}, {
id : "start",
name : "Start",
field : "start",
minWidth : 60,
editor : Slick.Editors.Date
}, {
id : "finish",
name : "Finish",
field : "finish",
minWidth : 60,
editor : Slick.Editors.Date
}, {
id : "effort-driven",
name : "Effort Driven",
width : 80,
minWidth : 20,
maxWidth : 80,
cssClass : "cell-effort-driven",
field : "effortDriven",
formatter : Slick.Formatters.Checkmark,
editor : Slick.Editors.Checkbox
} ];
 
var options = {
editable : true,
enableAddRow : false,
enableCellNavigation : true,
asyncEditorLoading : false,
autoEdit : false,
editCommandHandler : queueAndExecuteCommand //该属性可以实现撤销操作
};
//操作记录队列
var commandQueue = [];
//记录操作
function queueAndExecuteCommand(item, column, editCommand) {
commandQueue.push(editCommand);
editCommand.execute();
}
//撤销操作
function undo() {
var command = commandQueue.pop();
if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
command.undo();
grid.gotoCell(command.row, command.cell, false);
}
}
 
$(function() {
for ( var i = 0; i < 100; i++) {
var d = (data[i] = {});
 
d["title"] = "Task " + i;
d["description"] = "This is a sample task description.\n  It can be multiline";
d["duration"] = "5 days";
d["percentComplete"] = Math.round(Math.random() * 100);
d["start"] = "01/01/2012";
d["finish"] = "01/05/2012";
d["effortDriven"] = (i % 5 == 0);
}
 
grid = new Slick.Grid("#myGrid", data, columns, options);
})
</script>
</body>
</html>

SlickGrid example 3b: 支持撤销操作的编辑单元的更多相关文章

  1. SlickGrid example 3a: 可编辑单元

    可编辑单元支持一列展示多个属性域,可以为编辑单元提供验证,并且自定义验证事件.   代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 T ...

  2. vi 撤销操作

    'u' : 撤销上一个编辑操作 'ctrl + r' : 恢复,即回退前一个命令 'U' : 行撤销,撤销所有在前一个编辑行上的操作

  3. Excel怎么增加撤销操作的次数？Excel增加可撤销次数教程

    Excel怎么增加撤销操作的次数?Excel增加可撤销次数教程 在Excel的使用中,返回上一步是经常用到的一个工具,当数据填写有误需要查看之前的内容时,一般会通过"Ctrl Z" ...

  4. UVa 11987 Almost Union-Find（支持删除操作的并查集）

    传送门 Description I hope you know the beautiful Union-Find structure. In this problem, you’re to imple ...

  5. Git撤销操作

      撤销操作的相关文章 http://www.linuxidc.com/Linux/2015-06/119350.htm   ——撤销已经修改,但是还没有添加到暂存区的操作: 解决方案: 有两种情形: ...

  6. 无法更新 EntitySet“SoreInfo_Table”，因为它有一个 DefiningQuery，而 <ModificationFunctionMapping> 元素中没有支持当前操作的 <InsertFunction> 元素。

    无法更新 EntitySet"SoreInfo_Table",因为它有一个 DefiningQuery,而 <ModificationFunctionMapping> ...

  7. 【python cookbook】【数据结构与算法】14.对不原生支持比较操作的对象排序

    问题:想在同一个类的实例之间做排序,但是它们并不原生支持比较操作. 解决方案:使用内建的sorted()函数可接受一个用来传递可调用对象的参数key,sorted利用该可调用对象返回的待排序对象中的某 ...

  8. AudioPlayer.js，一个响应式且支持触摸操作的jquery音频插件

    AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...

  9. 支持BLOB操作的Jena框架扩展——JenaBLOB

    与研究语义网的同行们分享一下上半年做的一个东西,它是支持BLOB操作的Jena框架扩展--JenaBLOB,已在GitHub上开源,欢迎提出宝贵意见! 众所周知,Jena是不支持BLOB类型的Lite ...

随机推荐

  1. 集群因子(Clustering Factor)

    clustering factor是CBO使用的统计信息,用来衡量一个表中的列是否是规则排序存放的. 在通过索引访问表的时候,被用来作为代价评估的指示器.扫描索引的时候,clustering fact ...

  2. CPU informition

    tar jxvf util-linux-ng-2.18.bz2cd util-linux-ng-2.18/./configure --enable-arch --enable-partx --enab ...

  3. Leetcode: Evaluate Division

    Equations are given in the format A / B = k, where A and B are variables represented as strings, and ...

  4. STL lower_bound upper_bound binary-search

    STL中的二分查找——lower_bound .upper_bound .binary_search 二分查找很简单,原理就不说了.STL中关于二分查找的函数有三个lower_bound .upper ...

  5. [原创]java WEB学习笔记65：Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) ModelDriven拦截器 paramter 拦截器

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. [转] HashMap和HashSet的区别

    HashMap和HashSet的区别是Java面试中最常被问到的问题.如果没有涉及到Collection框架以及多线程的面试,可以说是不完整.而Collection框架的问题不涉及到HashSet和H ...

  7. HDU 3685 Rotational Painting（多边形质心+凸包）（2010 Asia Hangzhou Regional Contest）

    Problem Description Josh Lyman is a gifted painter. One of his great works is a glass painting. He c ...

  8. ThinkPHP讲解（八）——显示、修改、添加、删除

    一.显示数据 <h1>主页面</h1> <table width="100%" border="1" cellpadding=&q ...

  9. SQL优化SQL tuning

    1. 索引不合适,走主键进行了key lookup查找   说明索引没有覆盖到where条件 或者  orderby 或者 group by的列

  10. dataTabel转成dataview插入列后排序

    if (!string.IsNullOrEmpty(strQuyu) && !string.IsNullOrEmpty(strZuhao)) { string[] param = { ...