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

每个编辑单元可以设置不同的验证方法。
历史编辑可以撤销。
 
代码：
<!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. swift语言实战晋级-第9章 游戏实战-跑酷熊猫-7-8 移动平台的算法

    在上个小节,我们完成了平台的产生.那么我们来实现一下让平台移动.平台的移动,我们只需要在平台工厂类中写好移动的方法,然后在GameScene类中统一控制就行了. 在GameScene类中,有个upda ...

  2. Leetcode: Trapping Rain Water II

    Given an m x n matrix of positive integers representing the height of each unit cell in a 2D elevati ...

  3. introcuding less css with less.js, using webcompiler ext

    1.html [watch out for the !js load sequence and the attribute of !rel stylesheet/less!] <!DOCTYPE ...

  4. csuoj 1390: Planting Trees

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1390 1390: Planting Trees Time Limit: 1 Sec  Memory ...

  5. explode and implode

    [PHP源码阅读]explode和implode函数   explode和implode函数主要用作字符串和数组间转换的操作,比如获取一段参数后根据某个字符分割字符串,或者将一个数组的结果使用一个字符 ...

  6. paper 43 ：ENDNOTE下载及使用方法简介

    转载来源:http://blog.sciencenet.cn/blog-484734-367968.html 软件下载来源: EndNote v9.0 Final 正式版:http://www.ttd ...

  7. Testcase篇

    1: forever @(); 等待,c触发event. forever @(`SOC_TESTBENCH_NAME.vt_event1);在整个case的执行过程中,只要.c触发event1,就执行 ...

  8. 6. 星际争霸之php设计模式--建造器模式

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

  9. 【py登陆】python模拟登录

    用Python模拟登录网站 前面简单提到了 Python 模拟登录的程序,但是没写清楚,这里再补上一个带注释的 Python 模拟登录的示例程序.简单说一下流程:先用cookielib获取cookie ...

  10. SQL SERVER2012秘钥

    来自网络: MICROSOFT SQL SERVER 2012 DEVELOPER 版(开发版)序列号:YQWTX-G8T4R-QW4XX-BVH62-GP68YMICROSOFT SQL SERVE ...