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

每个编辑单元可以设置不同的验证方法。
历史编辑可以撤销。
 
代码：
<!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. RAC数据库迁移ASM磁盘组到其它存储

    环境介绍: 一共有两个磁盘组:crs和data:crs使用normal冗余:data使用外部冗余. 添加新的asm磁盘过程(略) 1.迁移前 SQL> select group_number, ...

  2. 数据存储之plist、偏好设置

    // 偏好设置--------------------------------- // 存储基本类型数据 NSUserDefaults *defaults = [NSUserDefaults stan ...

  3. LIS 最长递增子序列

    一.最长公共子序列 经典的动态规划问题,大概的陈述如下: 给定两个序列a1,a2,a3,a4,a5,a6......和b1,b2,b3,b4,b5,b6.......,要求这样的序列使得c同时是这两个 ...

  4. ajax提交含有html数据时的处理方法

    这两天在做一个文章内修改的功能,由于前端选用的Extjs控件库,于是就使用Ext.form.HtmlEditor. 在使用ajax提交数据的时候,需要提交包含有html代码的数据.这时候问题就来了,不 ...

  5. (转)json+flexgrid+jbox组合运用页面刷新<jsp>

    插件效果 1.JSP页面 1 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  6. jquery 实现ajax 上传文件的功能（使用插件 ajaxfileupload）

    js文件的下载地址 : http://files.cnblogs.com/wangqc/ajaxfileupload.js 页面代码: <html>    <!-- 引入相关的js文 ...

  7. android 内存不足的问题

    FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ' ...

  8. cannot modify header information 关于实现widget页面跳转的问题

    查找网上解决此问题的方法多是一样的,不过今天又遇到了这样的问题.试过之后发现可行: 在C盘的WINDOWS或者你的PHP文件夹中找到php.ini 这个配置文件,然后查找一项:output_buffe ...

  9. php正则表达式and数组

    <?php //正则表达式 //斜杠代表定界符 /^$/ /* $str="abcde123fg456h"; $reg="/\d/"; echo preg ...

  10. 手机端js模拟长按事件（代码仿照jQuery）

    代码编写: $.fn.longPress = function(fn) { var timeout = undefined; var $this = this; for(var i = 0;i< ...