为Yahoo! UI Extensions Grid增加内置的可编辑器_YUI.Ext相关

原文地址 文章日期：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><script id="ie-deferred-loader" src="javascript:false" defer></script> Shade Mostly Shady Sun or Shade Mostly Sunny Sunny