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

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

可編輯GIRD的例子

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

注：如果您發(fā)現(xiàn)gird工作不正常，請(qǐng)刷新瀏覽器，已保證它不是緩沖的（盡管我已經(jīng)叫它不緩存的了）。如果還是不行，請(qǐng)?jiān)谡搲颬OST出現(xiàn)的問題，以便我能修復(fù)它，謝！

單元格之間的鍵盤控制

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

實(shí)時(shí)數(shù)據(jù)驗(yàn)證

下列的編輯器，當(dāng)輸入數(shù)據(jù)都會(huì)有實(shí)時(shí)的數(shù)據(jù)驗(yàn)證。默認(rèn)情況下，非法的數(shù)據(jù)會(huì)有下劃紅線提示（像MSOffice），并有tooltip顯示錯(cuò)誤的原因。這些可用通過CSS改變。如單元格的數(shù)據(jù)包含非法的數(shù)據(jù)，編輯后（編輯器失去焦點(diǎn)，用戶按下回車或用戶按下方向鍵移動(dòng)到其它的單元格）單元格會(huì)恢復(fù)原始值。

國(guó)際化支持和韌性配置

編輯器的原型（prototypes）定義了所有錯(cuò)誤信息和配置選項(xiàng)，可根據(jù)你的需要來覆蓋（override）默認(rèn)的，尤其方便國(guó)際化的支持。有兩種方式配置：1.設(shè)置編輯器的屬性；2.傳入一個(gè)配置對(duì)象到編輯器的構(gòu)建函數(shù)。

 // 通過屬性設(shè)置選項(xiàng) var editor = new YAHOO.ext.grid.NumberEditor(); editor.allowBlank = false; editor.minValue = 10; editor.minText = "Nice try buddy, %0 is too small.";  //通過配置對(duì)象設(shè)置選項(xiàng) var editor = new YAHOO.ext.grid.NumberEditor({allowBlank: false, minValue: 10,  minText: "Nice try buddy, %0 is too small."});  //設(shè)置最大最小值，NumberEditors的西班牙文錯(cuò)誤提示 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"; 

預(yù)定義編輯器Predefined Editors

當(dāng)前的編輯器已經(jīng)實(shí)現(xiàn)的功能：

文本編輯器TextEditor 提供一個(gè)簡(jiǎn)單的文本編輯器，下列是配置選項(xiàng)：

• 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).

數(shù)字編輯器 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

提供一個(gè)日期編輯器的字段，可選地提供一個(gè)DatePicker。如果你不想用內(nèi)置的DatePicker,DateEditor提供一個(gè)方法(showCalendar)來覆蓋override內(nèi)置的DatePicker。相比YUI日歷組件，這里我選用了自己的DataPicker,它非常容易地override Gird事件,并工作地很好。壓縮后它只有5K大小，而YUI日歷壓縮后40k大小。使用DataPicker時(shí)，左/右改變?cè)路荩舷赂淖兡攴荩髽?biāo)滾輪快速地切換月份。DateEditor支持下列配置選項(xiàng)：

• 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。

單選項(xiàng)編輯器CheckboxEditor

為布爾值提供checkbox。當(dāng)前沒有配置選項(xiàng)。

SelectEditor

利用xhtml中的Select字段創(chuàng)建編輯器。你可以在JavaSCRIPT中用DOM來創(chuàng)建select，然后傳入到SelectEditor的構(gòu)建函數(shù)，或者用這種簡(jiǎn)單的方式：定義一個(gè)select在xhtml文檔中，定義 ygrid-editor class的樣式。

ShadeMostly ShadySun or ShadeMostly SunnySunny

創(chuàng)建SelectEditor 對(duì)象, 傳入Select之ID

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

組合所有的功能在一起

你可以采用這種方式定義一個(gè)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);

創(chuàng)建自己的編輯器

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

init(grid, bodyElement, callback);

這方法在編輯器被激活之前調(diào)用（每次）。gird參數(shù)明顯是gird對(duì)象。bodyElement 參數(shù)是gird內(nèi)的元素，當(dāng)你欲滾動(dòng)gird body時(shí)，編輯器應(yīng)該渲染的元素。回調(diào)函數(shù)是用于用戶編輯單元格時(shí)的調(diào)用。

cell.startEditing(value, row, cell);

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

stopEditing();

保存數(shù)據(jù)

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

反饋

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

目前這些功能來自反饋：

• NumberEditor.decimalSeparator - 支持不同的十進(jìn)制分隔符
  
• 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.

請(qǐng)隨時(shí)發(fā)表反饋！

JavaScript技術(shù)：為Yahoo! UI Extensions Grid增加內(nèi)置的可編輯器，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。