快速编辑模式2为锐的DataTable »雅虎的用户界面博客（YUIBlog）

快速编辑模式锐2的DataTable

2010年8月19日在上午08时42约翰|在林达尔发展 | 没有评论

锐2的DataTable提供了圆滑的内联编辑。当disableBtns打开配置在列，字符串或数字值的编辑一样简单的感觉就像Excel中。然而，经验不能像一个桌面应用程序响应，因为每个变化通常需要1到服务器的XHR调用存储（或拒绝！）新的价值。如果用户需要改变显示的许多价值观，它可以是一个缓慢而令人沮丧的经验。为了解决这个问题，我开发QuickEditDataTable。这延伸的DataTable添加快速编辑模式，允许所有可编辑的值被改变了一批量操作：

（点击屏幕玩这个例子。）

概观

进入快速编辑模式，请startQuickEdit() 要退出快速编辑模式，请cancelQuickEdit()

这是你的责任是拯救修改之前调用cancelQuickEdit() 为了简化这一任务，QuickEditDataTable提供getQuickEditChanges() 这将返回一个对象数组，每行一个。每个对象只有一个，已经于该行改变值，键入关闭列ID的。例如，如果表中有4列（标题，作者，年份，数量），以及用户只更改一行的数量到20，则该行的对象将是{quantity:20} 其他值将被忽略。

QuickEditDataTable可以轻松地扩展YAHOO.widget.ScrollingDataTable如果你需要的功能。如果你需要这个，只是做一个源文件的副本，改变基类。

组态

快速编辑是一个模式为可编辑状态，其中列的单元格格式化是换出并生成取代格式化有特殊input ， textarea ，或select元素。仅列有quickEdit配置将编辑。配置选项包括：

copyDown

如果真是这样，在列的顶部单元格将有一个按钮的值复制到该行的其余部分。

formatter

格式化的单元格将给予适当的形式栏：<input type="text">，<textarea>，或<选择>。默认情况下，细胞格式化YAHOO.widget.QuickEditDataTable.textQuickEditFormatter用于所有细胞产生输入元素。要获得一个textarea元素，配置一列使用YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter代替。您也可以编写自定义快速编辑格式化 - 见下文。

validation

验证配置的各个领域中的列。

css

CSS类编码基本验证规则：

yiv-required: 值不能为空。
yiv-length:[x,y]: 字符串必须至少x个字符，最多y字符。至少有一个x和y必须是指定的。
yiv-integer:[x,y]: 整数值必须至少x ，最多y 。 x和y都是可选的。
yiv-decimal:[x,y]: 十进制值必须至少x ，最多y 。指数都是不允许的。 x和y都是可选的。

fn

阿将调用与函数的DataTable的范围及细胞的表单元素作为参数。如果返回true值是有效的。否则，调用this.displayQuickEditMessage(...)显示一个错误，然后返回false。

msg

一个类型映射到时将显示一个基本的或正则表达式验证规则失败的消息。有效的类型有： required ， min_length ， max_length ， integer ， decimal ，和regex 。没有任何类型的默认为regex ，所以你必须指定一个消息如果您配置一个正则表达式验证。其他类型的默认的错误信息的存储在YAHOO.widget.QuickEditDataTable.Strings ，可覆盖和/或本地化。

regex

正则表达式的值必须满足，才能视为有效。

有时候，一个不可编辑的列必须提供不同时期的快速编辑模式。最好的例子是一列载有自航从快速编辑模式页面消磨可能是灾难性的一个环节。要删除快速编辑链接时，配置qeFormatter为列被YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter 。的电子邮件地址，使用YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter 。您也可以编写您自己的自定义，只读格式化。只需按照构建一个DataTable细胞格式化的一般规则。

自定义快速编辑格式化器

要编写一个自定义单元格格式化快速编辑模式，你必须结构的功能如下：

功能myQuickEditFormatter（埃尔，oRecord，oColumn，oData）（
   VaR的标记=
     '<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>'+
     YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
     el.innerHTML = lang.substitute（标记，（
      关键：oColumn.key，
       yiv：oColumn.quickEdit.validation？  （oColumn.quickEdit.validation.css | | ''）：''
     ））;
     el.firstChild.value = extractMyEditableValue（oData）;
     YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply（这一点，参数）;
 ）;