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

每个编辑单元可以设置不同的验证方法。
历史编辑可以撤销。
 
代码：
<!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. 定制对ArrayList的sort方法的自定义排序

    java中的ArrayList需要通过collections类的sort方法来进行排序 如果想自定义排序方式则需要有类来实现Comparator接口并重写compare方法 调用sort方法时将Arr ...

  2. Java基础之一组有用的类——为标记定义自己的模式（ScanString)

    控制台程序. Scanner类提供了一种方式,用来指定如何识别标记.这需要使用next()方法的两个重载版本.其中的一个版本接受Pattern类型的参数.另一个版本接受String类型的参数,用来指定 ...

  3. Sql清理日志文件

    场景: 我们导入MR数据时发现磁盘空间不够用了,导致的结果就是我们的程序很可能会抛出异常了,我们需要导入数据的时候进行日志瘦身. 问1:导入数据的时候,瘦身是否会造成数据库的异常? DBA提供解决方案 ...

  4. Three.js基础探寻九——网格

    在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...

  5. 几个PostgreSQL数据库操作总结

    创建表 语法:如下 create table     table_name     (column_name         column_type(parametes)options,…); 注意: ...

  6. struts2 radio标签 单选按钮

    <s:radio name="sex" label="性别" list="#{'男':'男','女':'女'}" value=&quo ...

  7. [原创]java WEB学习笔记56：Struts2学习之路---Struts 版本的 登录 demo

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

  8. Eclipse下配置C++开发环境（转）

    1. 首先确保你的电脑上已经安装了Java,如果没有,或者不确定,请到官网上下载并安装,网址如下(这一步我就不详述了): http://www.java.com/zh_CN/   2. 到官网上下载并 ...

  9. struts_20_对Action中所有方法、某一个方法进行输入校验（基于XML配置方式实现输入校验）

    第01步:导包 第02步:配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...

  10. 夺命雷公狗---node.js---22之项目的构建在node+express+mongo的博客项目7之数据的修改

    在修改的时候和在PHP里面修改的一样,都是需要在列表页传个id过来才可以实现修改的,如下所示: 然后在后端接收到他传过来id的同时去读取该id的所有信息: 然后就开始写post处理数据方面的问题了,如 ...