Yahoo!用戶界面博客（YUIBlog）

銳2 DataTable的快速編輯模式

銳2的DataTable提供光滑的內聯編輯。 當disableBtns列配置，編輯如字符串或數字的簡單值的感覺就像Excel中。 然而，經驗不能作為一個桌面應用程序的響應，因為每一個變化，通常需要一個 XHR調用服務器存儲（或拒絕）！新的價值。 如果用戶需要改變許多顯示的值，它可以是一個緩慢而令人沮喪的經驗。 為了解決這個問題，我開發 QuickEditDataTable。 這延伸的DataTable添加快速編輯模式，它允許在一個批量操作更改所有可編輯的值：

（ 點擊截圖發揮這個例子 。）

概述

要進入快速編輯模式，調用startQuickEdit() 要退出快速編輯模式，調用cancelQuickEdit()

這是你的責任cancelQuickEdit()調用之前保存的變化。 為了簡化這一任務，QuickEditDataTable提供getQuickEditChanges() 這返回一個對象數組，每行一個。 每個對象只包含已更改該行中，鍵關閉 id列的值。 例如，如果表中有4列（標題，作者，年份，數量等），用戶只需改變一行的數量為20，那麼該行的{quantity:20} 20 }。 其他值將被忽略。

QuickEditDataTable可以輕鬆地擴展YAHOO.widget.ScrollingDataTable如果你需要的功能。 如果您需要，只需做一個源文件的複製和修改基類。

配置

快速編輯編輯列的單元格格式化是換出取代生成與特殊格式化input輸入textarea的， select元素是一個模式的狀態。 只有列quickEdit配置將編輯。 配置選項是：

copyDown

如果為 true，在列的頂部單元格將有一個按鈕複製的價值，其餘的行。

formatter

細胞格式化將呈現以適當的形式領域：<input type="text">，<TEXTAREA>，或<SELECT>。 默認情況下，細胞格式化YAHOO.widget.QuickEditDataTable.textQuickEditFormatter用於所有細胞產生的輸入元素。 要得到一個textarea元素，配置，而不是一列使用YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter 。 你也可以寫一個自定義的快速編輯格式化 - 見下文。

validation

驗證配置列中的各個領域。

css

CSS類編碼的基本驗證規則：

yiv-required

值不能為空。

yiv-length:[x,y]

字符串必須x x字符，並且在最y字符。 至少必須指定其中一個 X和Y。

yiv-integer:[x,y]

整數值必須在x X ，並在y x y和y都是可選的。

yiv-decimal:[x,y]

十進制值必須至少x和在最y 。 指數是不允許的。 x x y y都是可選的。

fn

一個稱為其範圍和細胞的表單元素作為參數將與 DataTable的功能。 返回true，如果該值是有效的。 否則，調用this.displayQuickEditMessage(...)顯示錯誤，則返回false。

msg

一個類型映射到一個基本的或正則表達式驗證規則失敗時，將顯示的消息。 有效的類型有： required ， min_length ， max_length ， integer ， decimal ， regex Regex 。 是regex沒有類型的默認，所以你必須指定一個消息，如果你配置了一個正則表達式驗證。 其他類型的默認錯誤消息存儲YAHOO.widget.QuickEditDataTable.Strings YAHOO.widget.QuickEditDataTable.Strings和可重寫和/或本地化。

regex

正則表達式，該值必須滿足以被視為有效。

有時候，一個不可編輯的列必須在快速編輯模式呈現不同的。 最好的例子是一個列包含一個鏈接，因​​為從頁面導航，而在快速編輯模式可能是災難性的的。 要刪除在快速編輯鏈接，配置qeFormatter列YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter 。 對於電子郵件地址，使用YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter 。 你也可以寫你自己的自定義，只讀格式化。 只需按照正常的規則，為建設一個 DataTable細胞格式化。

編輯自定義快速格式化

要快速編輯模式寫一個自定義單元格的格式化，你必須的功能結構如下：

功能myQuickEditFormatter（EL，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（參數）;
 };

您可以使用textarea或select input的，而不是select ，但你只能創建一個單一的領域。

extractMyEditableValue()不必是一個單獨的函數，也不一定要限於只oData的。 工作一般應做內聯的格式化功能，但樣本函數的名稱，使得點明確。

作者簡介： 約翰Lindal （ @ jafl5272在Twitter）建設的基礎上率先工程師之一雅虎 APT是內置。 在此之前，他曾在雅虎出版商網絡。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us | Digg它！ | 書籤交易！