原文地址 文章日期：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>
Shade Mostly Shady Sun or Shade Mostly Sunny Sunny
Adder's-Tongue Shade $9.58 Apr 13, 2006 Yes Anemone Mostly Shady $8.86 Dec 26, 2006 Yes Bee Balm Shade $4.59 May 03, 2006 Yes Bergamot Shade $7.16 Apr 27, 2006 Yes Black-Eyed Susan Sunny $9.80 Jun 18, 2006 Yes Bloodroot Mostly Shady $2.44 Mar 15, 2006 Yes Blue Gentian Sun or Shade $8.56 May 02, 2006 Yes Buttercup Shade $2.57 Jun 10, 2006 Yes Butterfly Weed Sunny $2.78 Jun 30, 2006 Yes California Poppy Sunny $7.89 Mar 27, 2006 Yes Cardinal Flower Shade $3.02 Feb 22, 2006 Yes Cinquefoil Shade $7.06 May 25, 2006 Yes Columbine Mostly Shady $9.37 Mar 06, 2006 Yes Cowslip Mostly Shady $9.90 Mar 06, 2006 Yes Crowfoot Shade $9.34 Apr 03, 2006 Yes Dutchman's-Breeches Mostly Shady $6.44 Jan 20, 2006 Yes Gentian Sun or Shade $7.81 May 18, 2006 Yes Ginger, Wild Mostly Shady $9.03 Apr 18, 2006 Yes Grecian Windflower Mostly Shady $9.16 Jul 10, 2006 Yes Greek Valerian Shade $4.36 Jul 14, 2006 Yes Hepatica Mostly Shady $4.45 Jan 26, 2006 Yes Jack-In-The-Pulpit Mostly Shady $3.23 Feb 01, 2006 Yes Jacob's Ladder Shade $9.26 Feb 21, 2006 Yes Liverleaf Mostly Shady $3.99 Jan 02, 2006 Yes Marsh Marigold Mostly Sunny $6.81 May 17, 2006 Yes Mayapple Mostly Shady $2.98 Jun 05, 2006 Yes Phlox, Blue Sun or Shade $5.59 Feb 16, 2006 Yes Phlox, Woodland Sun or Shade $2.80 Jan 22, 2006 Yes Primrose Sunny $6.56 Jan 30, 2006 Yes
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
