Yahoo!用户界面博客（YUIBlog）

YUI的3 DataTable的快速编辑模式

即使锐3 DataTable中还没有内联编辑的单个细胞，它是相对简单，以实现快速编辑模式。 为DataTable中的快速编辑插件锐在3画廊允许同时编辑一个DataTable中的所有可见值。

（ 点击玩这个例子的截图 。）

概观

至于与YUI 2版本 ，快速编辑模式的核心思想是，换出新的细胞格式化，表单元素，例如，输入域或下拉列表填充细胞。 这样做start()被调用，基于下文所述的配置。 用户完成后，您可以调用getChanges()来获得改变的值，然后他们坚持。 退出快速编辑模式，呼吁cancel() （它被命名取消 ，而不是停下来提醒你，它丢弃所有的变化。）

自快速编辑廊模块是一个DataTable中的插件，你需要将其插入到您的DataTable之前，你可以用它：

 my_table.plug（Y.Plugin.DataTableQuickEdit）;

这个插件存储在qe DataTable的成员，所以你必须这样调用插件的功能：

 my_table.qe.start（）;

组态

快速编辑增加了两个新的所有列的配置属性： quickEdit和qeFormatter 。

如果一个列的quickEdit属性定义，将列在“快速编辑模式编辑。 接受所有默认设置，你可以简单地设置quickEdit:true 。 对于更多的控制权，你可以传递一个对象，具有以下属性：

formatter

单元格的格式化，这将导致以适当的形式领域：<input type="text">，<TEXTAREA>或<SELECT>。 默认情况下，细胞的格式化Y.Plugin.DataTableQuickEdit.textFormatter是用于所有细胞产生的输入元素。 为了得到一个textarea元素，配置，而不是使用Y.Plugin.DataTableQuickEdit.textareaFormatter列。

validation

每列字段的验证配置。

css

CSS类编码的基本验证规则：

yiv-required

值不能为空。

yiv-length:[x,y]

至少在最x y字符x字符和字符串必须。 必须指定至少一个x和y。

yiv-integer:[x,y]

整数的值必须是至少x和在最y 。 x y y都是可选的。

yiv-decimal:[x,y]

十进制值必须是至少x和最y 。 指数是不允许的。 x y y都是可选的。

fn

一个称为其范围和细胞的形式元素作为参数将DataTable的功能。 返回true如果该值是有效的。 否则，调用this.displayMessage(...)显示错误，则返回false。

msg

地图的类型时，将显示一个基本的或正则表达式验证规则失败的消息。 有效的类型有： required ， min_length ， max_length ， integer ， decimal ， regex 。 没有默认类型regex ，所以你必须指定一个消息，如果你配置一个正则表达式验证。 其他类型的默认错误信息存储在Y.FormManager.Strings （提供画廊formmgr CSS验证 ）和可重写和/或本地化。

regex

正则表达式的值必须满足为了被视为有效。

有时候，一个不可编辑的列必须在快速编辑模式呈现不同的。 最好的例子是一个列包含一个链接，因为从页面导航，而在“快速编辑模式可能是灾难性的。 要删除链接，在快速编辑配置qeFormatter列Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter 。 对于电子邮件地址，使用Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter 。 你也可以写你自己的自定义，只读格式化。 只需按照构建一个DataTable细胞格式化的一般规则。

缺少的特性

由于锐3.3.0的DataTable中的一个td 错误 ， td元素传递给一列格式化实际上是由前一列。 这太麻烦，以支持复制下来 ，在第一行中的一个按钮，让你复制的价值下降到所有其他行。

的错误也需要一个完整的基本快速编辑单元格格式化的改造，而不是操纵DOM返回的文本。 这就是为什么自定义单元格格式化是没有正式在最初的版本中支持。 如果你喜欢冒险，你仍然可以建立，但要记住，你将需要重写，包括加入支持复制下来，一旦在DataTable中的错误是固定的。

关于作者简介：： 约翰Lindal （ @ jafl5272在Twitter）是雅虎建设的基础上率先工程师之一 APT是建成。 此前，他曾在雅虎出版商网络。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！