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

每个编辑单元可以设置不同的验证方法。
历史编辑可以撤销。
 
代码：
<!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. CDB中plug PDB

    CDB中plug PDB 先决条件: ·CDB要能够访问之前被unplugged 的pdb的xml文件.如果不能访问,需要使用dbms_pdb.recover创建一个xml文件 ·CDB要能够访问到该 ...

  2. Java基础之一组有用的类——使用正则表达式查找和替换（SearchAndReplace）

    控制台程序. 使用正则表达式执行查找和替换操作,只需要调用Matcher对象的find()方法,就可以调用appendReplacement()方法来替换匹配的子序列.在提供给方法的新StringBu ...

  3. Mac 显示和隐藏 隐藏文件

    控制台运行: //显示 defaults write com.apple.finder AppleShowAllFiles -bool true //隐藏 defaults write com.app ...

  4. uva 10755 - Garbage Heap

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  5. C++之路进阶——codevs1036（商务旅行）

    1036 商务旅行 题目描述 Description 某首都城市的商人要经常到各城镇去做生意,他们按自己的路线去做,目的是为了更好的节约时间. 假设有N个城镇,首都编号为1,商人从首都出发,其他各城镇 ...

  6. 【皇甫】☀那些事儿......STEP

    写项目之前呢,先来缕缕思路,既然要写学生管理系统,那肯定上不了从数据库中读取信息,然而想要从数据库中拿到你想要的东西,就要先登录,得到他的权限才行,所以我们第一步就要先搞出一个登录页面并且能连接到数据 ...

  7. Array.prototype.each

    Array.prototype.each = function(closure){ //递归合并 return this.length ? [closure(this.slice(0,1))].con ...

  8. mysql之触发器before和after的区别

    我们先做个测试: 接上篇日志建的商品表g和订单表o和触发器 假设:假设商品表有商品1,数量是10: 我们往订单表插入一条记录: insert into o(gid,much) values(1,20) ...

  9. PAT乙级 1026. 程序运行时间(15)

    1026. 程序运行时间(15) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 要获得一个C语言程序的运行时间, ...

  10. 2. 星际争霸之php面向对象(二)

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...