原文地址 文章日期：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。
<script>
/*
* yui-ext
* Copyright(c) 2006, Jack Slocum.
*/
EditorExample = function(){
var dataModel;
var grid;
var colModel;
var formatMoney = function(value){
value -= 0;
value = (Math.round(value*100))/100;
value = (value == Math.floor(value)) ? value + '.00' : ( (value*10 == Math.floor(value*10)) ? value + '0' : value);
return "$" + value;
};
var formatBoolean = function(value){
return value ? 'Yes' : 'No';
};
var formatDate = function(value){
return value.dateFormat('M d, Y');
};
var parseDate = function(value){
return new Date(Date.parse(value));
};
return {
init : function(){
var yg = YAHOO.ext.grid;
var cols = [{
header: "Common Name",
width: 130,
editor: new yg.TextEditor({allowBlank: false})
},{
header: "Light",
width: 130,
editor: new yg.SelectEditor('light')
},{
header: "Price",
width: 70,
renderer: formatMoney,
editor: new yg.NumberEditor({allowBlank: false, allowNegative: false, maxValue: 10})
},{
header: "Available",
width: 95,
renderer: formatDate,
editor: new yg.DateEditor({format: 'm/d/y', minValue: '01/01/06', disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends',
disabledDates : ['^07', '04/15', '12/02/06'],
disabledDatesText : 'The plants are pollinating on %0, choose a different date.'})
},{
header: "Indoor?",
width: 55,
renderer: formatBoolean,
editor: new yg.CheckboxEditor()
}];
colModel = new YAHOO.ext.grid.DefaultColumnModel(cols);
colModel.defaultSortable = true;
var schema = {
tagName: 'plant',
id: 'use-index',
fields: ['common', 'light', 'price', 'availability', 'indoor']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
dataModel.addPreprocessor(2, parseFloat);
dataModel.addPreprocessor(3, parseDate);
dataModel.addPreprocessor(4, Boolean);
dataModel.setDefaultSort(colModel, 0, "ASC");
grid = new YAHOO.ext.grid.EditorGrid('editor-grid', dataModel, colModel);
// to use double click to edit:
//grid.getSelectionModel().clicksToActivateCell = 2;
grid.render();
dataModel.load('demos/plants.xml');
},
// filtering support, regex, function or text match
filter : function(e){
var mfilter = function(value){
return (value == 'Shade');
}
dataModel.filter({0: /^B.*/i, 1: mfilter});
},
// hide columns
hide : function(e){
colModel.setHidden(1, true);
}
};
}();
YAHOO.ext.EventManager.onDocumentReady(EditorExample.init, EditorExample, true);
</script>
Adder's-TongueShade$9.58Apr 13, 2006YesAnemoneMostly Shady$8.86Dec 26, 2006YesBee BalmShade$4.59May 03, 2006YesBergamotShade$7.16Apr 27, 2006YesBlack-Eyed SusanSunny$9.80Jun 18, 2006YesBloodrootMostly Shady$2.44Mar 15, 2006YesBlue GentianSun or Shade$8.56May 02, 2006YesButtercupShade$2.57Jun 10, 2006YesButterfly WeedSunny$2.78Jun 30, 2006YesCalifornia PoppySunny$7.89Mar 27, 2006YesCardinal FlowerShade$3.02Feb 22, 2006YesCinquefoilShade$7.06May 25, 2006YesColumbineMostly Shady$9.37Mar 06, 2006YesCowslipMostly Shady$9.90Mar 06, 2006YesCrowfootShade$9.34Apr 03, 2006YesDutchman's-BreechesMostly Shady$6.44Jan 20, 2006YesGentianSun or Shade$7.81May 18, 2006YesGinger, WildMostly Shady$9.03Apr 18, 2006YesGrecian WindflowerMostly Shady$9.16Jul 10, 2006YesGreek ValerianShade$4.36Jul 14, 2006YesHepaticaMostly Shady$4.45Jan 26, 2006YesJack-In-The-PulpitMostly Shady$3.23Feb 01, 2006YesJacob's LadderShade$9.26Feb 21, 2006YesLiverleafMostly Shady$3.99Jan 02, 2006YesMarsh MarigoldMostly Sunny$6.81May 17, 2006YesMayappleMostly Shady$2.98Jun 05, 2006YesPhlox, BlueSun or Shade$5.59Feb 16, 2006YesPhlox, WoodlandSun or Shade$2.80Jan 22, 2006YesPrimroseSunny$6.56Jan 30, 2006Yes
