原文地址 文章日期：2006/9/10

對YUI-EXT GIRD功能需求最強烈的是內置可編輯的支持。市場上大多數收費的JavaSCRIPT GIRD，我看過的那些可編輯支持，并沒有給我留下太深的印象。它給你一個基本的TEXT FIELD，一些CHECKBOXS或者是Select fields,這導致了你一邊單擊某個字段在編輯，另一邊廂插入一個FORM到這個單元格之中，不知不覺地，會出現越來越多編輯過的“腳印footprint",尤其是IE，在很多行的情況下。 所以我決定不采用這種方法，而采用類似于Windows或JavaSwing的方式，設計yui-ext Gird的編輯器。為了這一起成為可能，你的反饋必不可少，尤其是你覺得缺少了某些功能，不妨反饋給我。

可編輯GIRD的例子

這是個正在ALPHA測試中的可編輯GIRD。單擊某個單元格可編輯。試試這些：輸入一個錯誤的日期；輸入大于10的price；輸入早于01/01/06的日期；空白CommonName字段；測試數字字段蒙板；雙擊每列之間的分隔符，可自動調整每列寬度，鼠標滾輪滾動Data picker。

注：如果您發現gird工作不正常，請刷新瀏覽器，已保證它不是緩沖的（盡管我已經叫它不緩存的了）。如果還是不行，請在論壇里POST出現的問題，以便我能修復它，謝！

單元格之間的鍵盤控制

最初的GIRD支持可編輯字段的Tab/Shift Tab、回車、方向鍵的控制 ，類似MS Excel。這個范例中不僅支持單擊，而且支持雙擊。

實時數據驗證

下列的編輯器，當輸入數據都會有實時的數據驗證。默認情況下，非法的數據會有下劃紅線提示（像MSOffice），并有tooltip顯示錯誤的原因。這些可用通過CSS改變。如單元格的數據包含非法的數據，編輯后（編輯器失去焦點，用戶按下回車或用戶按下方向鍵移動到其它的單元格）單元格會恢復原始值。

國際化支持和韌性配置

編輯器的原型（prototypes）定義了所有錯誤信息和配置選項，可根據你的需要來覆蓋（override）默認的，尤其方便國際化的支持。有兩種方式配置：1.設置編輯器的屬性；2.傳入一個配置對象到編輯器的構建函數。

 // 通過屬性設置選項 var editor = new YAHOO.ext.grid.NumberEditor(); editor.allowBlank = false; editor.minValue = 10; editor.minText = "Nice try buddy, %0 is too small.";  //通過配置對象設置選項 var editor = new YAHOO.ext.grid.NumberEditor({allowBlank: false, minValue: 10,  minText: "Nice try buddy, %0 is too small."});  //設置最大最小值，NumberEditors的西班牙文錯誤提示 YAHOO.ext.grid.NumberEditor.prototype.minText = "La cantidad debe ser menos de %0"; YAHOO.ext.grid.NumberEditor.prototype.maxText = "La cantidad debe ser más de %0"; 

預定義編輯器Predefined Editors

當前的編輯器已經實現的功能：

文本編輯器TextEditor 提供一個簡單的文本編輯器，下列是配置選項：

• allowBlank - True if the cell is allowed to be empty.
• selectOnFocus - True to select the text when the editor is activated.
• blankText - The tooltip (error message) to display when the cell is empty and is not allowed to be.
• regex - A regular expression to match if the value is valid. If the regex.test(value) returns false, the value is considered invalid.
• regexText - The tooltip (error message) to display when regex does not match.
• validator - Any custom validation function you want called. The function must return true if the data is valid or an error message otherwise.
• validationDelay - The delay in milliseconds for validation. Each time the user types something the field is validated after a specified delay, setting this value allows you to customize that delay (for example, if your custom validation routine is slow).

數字編輯器 NumberEditor

• allowDecimals - True if the cell can have decimal values.
• decimalSeparator - Character(s) to allow as the decimal separator.
• decimalPrecision - Set the maximum decimal precision.
• decimalPrecisionFcn - Define the function to call to remove extra precision (ie. Math.floor, Math.round, Math.ceil or your own function).
• allowNegative - True if the cell allows negative values.
• selectOnFocus - True to select the text when the editor is activated.
• minValue - The minimum value the cell will allow.
• maxValue - The maximum value the cell will allow.
• minText - The tooltip to display when the value in the cell is below the minimum.
• maxText - The tooltip to display when the value in the cell is above the maximum.
• nanText - The tooltip to display when the value in the cell is not a valid number (for example, negatives are allowed and the value in the cell is just "-" with no numbers).
• allowBlank -同TextEditor。
• blankText -同TextEditor。
• validationDelay -同TextEditor。
• validator -同TextEditor。

日期編輯器 DataEditor

提供一個日期編輯器的字段，可選地提供一個DatePicker。如果你不想用內置的DatePicker,DateEditor提供一個方法(showCalendar)來覆蓋override內置的DatePicker。相比YUI日歷組件，這里我選用了自己的DataPicker,它非常容易地override Gird事件,并工作地很好。壓縮后它只有5K大小，而YUI日歷壓縮后40k大小。使用DataPicker時，左/右改變月份，上下改變年份，鼠標滾輪快速地切換月份。DateEditor支持下列配置選項：

• format - The date format for the editor. The format is now identical to php date() and text is allowed. Credit for that goes to this fantastic date library. This format is for the editor only and doesn't affect the rendering of the cell when not in edit mode. Your rendering function can use any date format it wants.
• minValue - The minimum allowed date. Can be either a Javascript date object or a string date in the specified format.
• maxValue - The maximum allowed date. Can be either a Javascript date object or a string date in the specified format.
• minText - The tooltip to display when the date in the cell is before minValue.
• maxText - The tooltip to display when the date in the cell is after maxValue.
• invalidText - The text to display when the date in the field is invalid (for example: 02/31/06)
• disabledDays - An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday.
• disabledDaysText - The tooltip to display when the date in the cell (or DatePicker) falls on a disabled day.
• disabledDates - An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular expression so they are very powerful. For example, ["03/08/2003", "09/16/2003"] would disable those dates, but ["03/08", "09/16"] would disable them for every year. If you are using short years, you will want to use ^ to tell the regular expression to only match the beginning like ["^03/08"]. To disable March of 2006: ["03/../2006"] or every March ["^03"]. In order to support regular expressions, if you are using a date format that has "." in it, you will have to escape the dot when restricting dates. For example: ["03.08.03"].
• disabledDatesText - The tooltip to display when the date in the cell (or DatePicker) falls on a disabled date.
• allowBlank -同TextEditor。
• blankText -同TextEditor。
• validationDelay -同TextEditor。
• validator -同TextEditor。

單選項編輯器CheckboxEditor

為布爾值提供checkbox。當前沒有配置選項。

SelectEditor

利用xhtml中的Select字段創建編輯器。你可以在JavaSCRIPT中用DOM來創建select，然后傳入到SelectEditor的構建函數，或者用這種簡單的方式：定義一個select在xhtml文檔中，定義 ygrid-editor class的樣式。

ShadeMostly ShadySun or ShadeMostly SunnySunny

創建SelectEditor 對象, 傳入Select之ID

var editor = new YAHOO.ext.grid.SelectEditor('light'); 

組合所有的功能在一起

你可以采用這種方式定義一個ColumnModel:

 var yg = YAHOO.ext.grid;var cols = [{     header: "Common",     width: 120,     editor: new yg.TextEditor()  },{    header: "Light",     width: 80,     editor: new yg.SelectEditor('light')  },{    header: "Price",     width: 50,     renderer: formatMoney,     editor: new yg.NumberEditor({allowBlank: false, allowNegative: false})  },{    header: "Available",     width: 85,     renderer: formatDate,     editor: new yg.DateEditor({format: 'MM/dd/yy', minValue: '01/01/06'})  },{    header: "Indoor?",     width: 50,     renderer: formatBoolean,     editor: new yg.CheckboxEditor()  }];var colModel = new YAHOO.ext.grid.DefaultColumnModel(cols);

創建自己的編輯器

如果以上的編輯器不夠用的話，GIRD與編輯器之間的接口（interface）是足夠簡單的讓你輕松地創建你自己的編輯器。 甚至有個這樣一個的基類（CellEditor），已經負責了75%-80%的工作量。CellEditor 接口由三個方法組成（grid, bodyElement, callback）；

init(grid, bodyElement, callback);

這方法在編輯器被激活之前調用（每次）。gird參數明顯是gird對象。bodyElement 參數是gird內的元素，當你欲滾動gird body時，編輯器應該渲染的元素。回調函數是用于用戶編輯單元格時的調用。

cell.startEditing(value, row, cell);

激活某個單元格編輯后，這個方法被調用。當調用后，編輯器組件應該適應其自身到單元格中，設置它的初始值，附加到特定的事件中，例如，另外一個單元格被激活編輯，那么原來的單元格就要停止編輯了。

stopEditing();

保存數據

改變單元格數據會觸發DataModel的onCellUpdated事件。你可利用該事件來保存數據。如果你使用是XMLDataModel，所有的編輯會自動保存到由DataMODEL加載的XML文檔。通過getDocument() 可獲取該文檔。

反饋

回溯到這篇貼子的目的，是為了可以盡可能測試，然后歸檔，準備發布出來。我正正需要的是反饋。缺了些什么？我肯定這里還有很多你需要、想要的功能而我還沒做的。當前只有我一個人在做（不過我也希望有所改變），沒有大家的參與是不可能開發想這樣的GIRD。如果有你想看到功能，請發表評論或在論壇里參與討論。謝！

目前這些功能來自反饋：

• NumberEditor.decimalSeparator - 支持不同的十進制分隔符
  
• NumberEditor.decimalPrecision, NumberEditor.decimalPrecisionFcn - Support for decimal precision and rounding etc. See the thread in the forum for details.
  
• Shift-tab to navigate backwards, enter moves down 1 cell.
  
• DatePicker changes: Highlights selected date, highlights today, restricts selection based on min/max values for the DateEditor.
  
• Hiding and "Unhiding" of columns programmatically. You can also start columns in a hidden state.
  
• More DateEditor/Picker enhancements: disabling of days (i.e. Saturday and Sunday), and disabling of individual dates/date ranges/dates each year. The disabling of the dates is accomplished by dynamically building a regular expression so it is very flexible and very fast. See DateEditor above for more details. The date format specifiers are different now and match the php date() function instead of Java mm/dd/yy style. The reason is I integrated this small date lib and got rid of my own date parsing code. It's faster and also support dates with text now, such as 15-Mar-06.
  
• Regular expression validation on the TextEditor without using a validator function.

請隨時發表反饋！

JavaScript技術：為Yahoo! UI Extensions Grid增加內置的可編輯器，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。