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！