inputEx Documentation
Back to homepage
inputEx Documentation
> DataTable-beta.js
0.2.2
This is the source view for DataTable-beta.js
(function() { var lang = YAHOO.lang, Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, inputEx = YAHOO.inputEx; /** * @class Create an editable datatable * @constructor * @param {Object} options Options: *
*
id
*
parentEl
*
editing 'formeditor' (default) or 'celleditor'
*
tableColumns: (optional) list of visible columns in the datatable
*
sortable: (optional) are the columns sortable, default true
*
resizeable: (optional) are the columns resizeable, default true
*
allowInsert: default true
*
allowModify: default true
*
allowDelete: default true
*
*/ inputEx.widget.DataTable = function(options) { // Options this.options = options || {}; this.options.id = this.options.id || Dom.generateId(); this.options.parentEl = lang.isString(options.parentEl) ? Dom.get(options.parentEl) : options.parentEl; this.options.editing = this.options.editing || 'formeditor'; // + this.options.tableColumns this.options.sortable = lang.isUndefined(this.options.sortable) ? true : this.options.sortable; this.options.resizeable = lang.isUndefined(this.options.resizeable) ? true : this.options.resizeable; this.options.allowInsert = lang.isUndefined(this.options.allowInsert) ? true : this.options.allowInsert; this.options.allowModify = lang.isUndefined(this.options.allowModify) ? true : this.options.allowModify; this.options.allowDelete = lang.isUndefined(this.options.allowDelete) ? true : this.options.allowDelete; // Create main container and append it immediatly to the parent DOM element this.element = inputEx.cn('div', {id: this.options.id }); this.options.parentEl.appendChild(this.element); // Call the rendering method when the container is available Event.onAvailable(this.options.id, this.renderDatatable, this, true); /** * @event * @param {YAHOO.widget.Record} Removed record * @desc YAHOO custom event fired when an item is removed */ this.itemRemovedEvt = new YAHOO.util.CustomEvent('itemRemoved', this); /** * @event * @param {YAHOO.widget.Record} Added record * @desc YAHOO custom event fired when an item is added */ this.itemAddedEvt = new YAHOO.util.CustomEvent('itemAdded', this); /** * @event * @param {YAHOO.widget.Record} Modified record * @desc YAHOO custom event fired when an item is modified */ this.itemModifiedEvt = new YAHOO.util.CustomEvent('itemModified', this); }; inputEx.widget.DataTable.prototype = { /** * Render the datatable */ renderDatatable: function() { this.columndefs = this.fieldsToColumndefs(this.options.fields); this.datatable = new YAHOO.widget.DataTable(this.element,this.columndefs, this.options.datasource, this.options.datatableOpts); this.datatable.subscribe('cellClickEvent', this.onCellClick, this, true); // Select the editing method if(this.options.editing == "formeditor") { this.initFormEditor(); } else if(this.options.editing == "celleditor") { this.initCellEditor(); } // Insert button if ( this.options.allowInsert ){ this.insertButton = inputEx.cn('button', null, null, inputEx.messages.insertItemText); Event.addListener(this.insertButton, 'click', this.onInsertButton, this, true); this.options.parentEl.appendChild(this.insertButton); } }, /** * Create an inputEx form next to the datatable. * If this.options.editing == "formeditor" */ initFormEditor: function() { // Subscribe to events for row selection this.datatable.subscribe("rowMouseoverEvent", this.datatable.onEventHighlightRow); this.datatable.subscribe("rowMouseoutEvent", this.datatable.onEventUnhighlightRow); this.datatable.subscribe("rowClickEvent", this.datatable.onEventSelectRow); // Listener for row selection this.datatable.subscribe("rowSelectEvent", this.onEventSelectRow, this, true); // Form container this.formContainer = inputEx.cn('div', {className: "inputEx-DataTable-formContainer"}, null, " "); this.options.parentEl.appendChild(this.formContainer); // Build the form var that = this; this.subForm = new inputEx.Form({ parentEl: this.formContainer, fields: this.options.fields, legend: this.options.legend, buttons: [ { type: 'submit', onClick: function(e) {that.onSaveForm(e); }, value: inputEx.messages.saveText}, { type: 'button', onClick: function(e) {that.onCancelForm(e);}, value: inputEx.messages.cancelText} ] }); // Programmatically select the first row this.datatable.selectRow(this.datatable.getTrEl(0)); // Programmatically bring focus to the instance so arrow selection works immediately this.datatable.focus(); // Positionning var dt = this.datatable.get('element'); Dom.setStyle(dt, "float", "left"); // Hiding subform this.hideSubform(); // Add class to style the popup Dom.addClass(this.subForm.divEl, "inputEx-DataTable-formWrapper"); this.options.parentEl.appendChild(inputEx.cn('div', null, {"clear":"both"})); }, /** * Make the datatable inplace editable with inputEx fields * If this.options.editing == "celleditor" */ initCellEditor: function() { // Set up editing flow var highlightEditableCell = function(oArgs) { var elCell = oArgs.target; if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) { this.highlightCell(elCell); } }; this.datatable.subscribe("cellMouseoverEvent", highlightEditableCell); this.datatable.subscribe("cellMouseoutEvent", this.datatable.onEventUnhighlightCell); }, /** * Handling cell click events */ onCellClick: function(ev,args) { var target = Event.getTarget(ev); var column = this.datatable.getColumn(target); var rowIndex = this.datatable.getTrIndex(target); if (column.key == 'delete') { if (confirm(inputEx.messages.confirmDeletion)) { var record = this.datatable.getRecord(target); if(this.editingNewRecord) { this.editingNewRecord = false; } else { this.itemRemovedEvt.fire( record ); } this.datatable.deleteRow(target); this.hideSubform(); } } else if(column.key == 'modify') { // make the form appear this.showSubform(rowIndex); } else { this.datatable.onEventShowCellEditor(ev); this.deplaceSubForm(rowIndex); } }, /** * Insert button event handler */ onInsertButton: function(e) { // Insert a new row this.datatable.addRow({}); // Select the new row this.datatable.unselectRow(this.selectedRecord); var rs = this.datatable.getRecordSet(); var row = this.datatable.getTrEl(rs.getLength()-1); this.datatable.selectRow(row); if(this.options.editing == "formeditor") { this.editingNewRecord = true; this.showSubform(rs.getLength()-1); } }, /** * Set the subForm value when a row is selected */ onEventSelectRow: function(args) { if(this.editingNewRecord && this.selectedRecord != args.record) { this.removeUnsavedRecord(); this.editingNewRecord = false; } this.selectedRecord = args.record; this.subForm.setValue(this.selectedRecord.getData()); }, /** * Save the form value in the dataset */ onSaveForm: function(e) { // Prevent submitting the form Event.stopEvent(e); // Update the record var newvalues = this.subForm.getValue(); this.datatable.updateRow( this.selectedRecord , newvalues ); // Hide the subForm this.hideSubform(); if(this.editingNewRecord) { // Fire the modify event this.itemAddedEvt.fire(this.selectedRecord); this.editingNewRecord = false; } else { // Fire the modify event this.itemModifiedEvt.fire(this.selectedRecord); } }, /** * Remove the record that has not been saved */ removeUnsavedRecord: function() { this.datatable.deleteRow(this.selectedRecord); }, /** * Cancel row edition */ onCancelForm: function(e) { Event.stopEvent(e); this.hideSubform(); if(this.editingNewRecord) { this.removeUnsavedRecord(); this.editingNewRecord = false; } }, /** * Hide the form */ hideSubform: function() { Dom.setStyle(this.formContainer, "display", "none"); }, /** * Show the form */ showSubform: function(rowIndex) { Dom.setStyle(this.formContainer, "display", ""); this.deplaceSubForm(rowIndex); this.subForm.focus(); }, /** * Deplace the form */ deplaceSubForm: function(rowIndex) { var columnSet = this.datatable.getColumnSet(); // Hack : it seems that the getTdEl function add a bug for rowIndex == 0 if ( rowIndex == 0 ) { var tableFirstRow = this.datatable.getFirstTrEl(); Dom.setY(this.formContainer,Dom.getY(tableFirstRow) - 18); } else { var column = columnSet.keys[columnSet.keys.length-1]; var cell = this.datatable.getTdEl({column: column, record: rowIndex}); Dom.setY(this.formContainer,Dom.getY(cell) - 18); } }, /** * Convert an inputEx fields definition to a DataTable columns definition */ fieldsToColumndefs: function(fields) { var columndefs = []; for(var i = 0 ; i < fields.length ; i++) { if(!this.options.tableColumns || inputEx.indexOf(fields[i].inputParams.name, this.options.tableColumns) != -1 ) { columndefs.push( this.fieldToColumndef(fields[i]) ); } } // Adding modify column if we use form editing and if allowModify is true if(this.options.editing == "formeditor" && this.options.allowModify ) { columndefs.push({ key:'modify', label:' ', formatter:function(elCell) { elCell.innerHTML = inputEx.messages.modifyText; elCell.style.cursor = 'pointer'; } }); } // Adding delete column if(this.options.allowDelete) { columndefs.push({ key:'delete', label:' ', formatter:function(elCell) { elCell.innerHTML = inputEx.messages.deleteText; elCell.style.cursor = 'pointer'; } }); } return columndefs; }, /** * Convert a single inputEx field definition to a DataTable column definition */ fieldToColumndef: function(field) { var columnDef = { key: field.inputParams.name, label: field.inputParams.label, sortable: this.options.sortable, resizeable: this.options.resizeable }; // In cell editing if the field is listed in this.options.editableFields if(this.options.editing && lang.isArray(this.options.editableFields) ) { if(inputEx.indexOf(field.inputParams.name, this.options.editableFields) != -1) { columnDef.editor = new inputEx.widget.InputExCellEditor(field); } } // Field formatter if(field.formatter) { columnDef.formatter = field.formatter; } else { if(field.type == "date") { columnDef.formatter = YAHOO.widget.DataTable.formatDate; } } // TODO: other formatters return columnDef; } }; /** * The InputExCellEditor class provides functionality for inline editing * using the inputEx field definition. * * @class InputExCellEditor * @extends YAHOO.widget.BaseCellEditor * @constructor * @param {Object} inputExFieldDef InputEx field definition object */ inputEx.widget.InputExCellEditor = function(inputExFieldDef) { this._inputExFieldDef = inputExFieldDef; this._sId = "yui-textboxceditor" + YAHOO.widget.BaseCellEditor._nCount++; inputEx.widget.InputExCellEditor.superclass.constructor.call(this, "inputEx", {disableBtns:true}); }; // InputExCellEditor extends BaseCellEditor lang.extend(inputEx.widget.InputExCellEditor, YAHOO.widget.BaseCellEditor, /** * @scope inputEx.widget.InputExCellEditor.prototype */ { /** * Render the inputEx field editor */ renderForm : function() { // Build the inputEx field this._inputExField = inputEx(this._inputExFieldDef); this.getContainerEl().appendChild(this._inputExField.getEl()); // Save the cell value at updatedEvt this._inputExField.updatedEvt.subscribe(function(e, args) { // Hack to NOT close the field at the first updatedEvt (fired when we set the value) if(this._updatedEvtForSetValue) { this._updatedEvtForSetValue = false; return; } this.save(); }, this, true); if(this.disableBtns) { // By default this is no-op since enter saves by default this.handleDisabledBtns(); } }, /** * Hack to NOT close the field at the first updatedEvt (fired when we set the value) */ show: function() { inputEx.widget.InputExCellEditor.superclass.show.call(this); this._updatedEvtForSetValue = true; }, /** * Resets InputExCellEditor UI to initial state. */ resetForm : function() { this._inputExField.setValue(lang.isValue(this.value) ? this.value.toString() : ""); }, /** * Sets focus in InputExCellEditor. */ focus : function() { this._inputExField.focus(); }, /** * Returns new value for InputExCellEditor. */ getInputValue : function() { return this._inputExField.getValue(); } }); // Copy static members to InputExCellEditor class lang.augmentObject(inputEx.widget.InputExCellEditor, YAHOO.widget.BaseCellEditor); inputEx.messages.saveText = "Save"; inputEx.messages.cancelText = "Cancel"; inputEx.messages.deleteText = "delete"; inputEx.messages.modifyText = "modify"; inputEx.messages.insertItemText = "Insert"; inputEx.messages.confirmDeletion = "Are you sure?"; })();
Pages
Index
Getting Started
Overview
Markup structure
Migrate from 0.1.0
Field development
DOM functions
Internationalization
Visualization
Examples
Classes
(treeview)
inputEx
inputEx.AutoComplete
inputEx.BirthdateField
inputEx.CheckBox
inputEx.ColorField
inputEx.ColorField2
inputEx.CombineField
inputEx.DateField
inputEx.DatePickerField
inputEx.DateSplitField
inputEx.DateTimeField
inputEx.DSSelectField
inputEx.EmailField
inputEx.Field
inputEx.FileField
inputEx.Form
inputEx.formForMethod
inputEx.FrenchDate
inputEx.FrenchPhone
inputEx.generateServiceForm
inputEx.Group
inputEx.HiddenField
inputEx.ImagemapField
inputEx.InPlaceEdit
inputEx.IntegerField
inputEx.IPv4Field
inputEx.JsonSchema
inputEx.JsonSchema.Builder
inputEx.ListField
inputEx.MapField
inputEx.MenuField
inputEx.MultiAutoComplete
inputEx.MultiSelectField
inputEx.NumberField
inputEx.PairField
inputEx.PasswordField
inputEx.RadioButton
inputEx.RadioField
inputEx.RTEField
inputEx.SelectField
inputEx.SliderField
inputEx.StringField
inputEx.Textarea
inputEx.TimeField
inputEx.TreeField
inputEx.TypeField
inputEx.UneditableField
inputEx.UpperCaseField
inputEx.UrlField
inputEx.VectorField
inputEx.widget
inputEx.widget.DataTable
inputEx.widget.DDList
inputEx.widget.DDListItem
inputEx.widget.Dialog
inputEx.widget.InputExCellEditor
inputEx.widget.JsonTreeInspector
Files
AutoComplete.js
BirthdateField.js
CheckBox.js
ColorField.js
ColorField2.js
CombineField.js
DataTable-beta.js
DateField.js
DatePickerField.js
DateSplitField.js
DateTimeField.js
ddlist.js
Dialog-beta.js
DSSelectField.js
EmailField.js
Field.js
FileField-beta.js
Form.js
fr.js
FrenchDate.js
FrenchPhone.js
Group.js
HiddenField.js
ImagemapField.js
InPlaceEdit.js
inputex-loader.js
inputex-rpc.js
inputex.js
IntegerField.js
IPv4Field.js
it.js
json-schema.js
json-tree-inspector.js
ListField.js
MapField.js
MenuField.js
MultiAutoComplete.js
MultiSelectField.js
NumberField.js
PairField.js
PasswordField.js
RadioButton.js
RadioField.js
RTEField.js
SelectField.js
SliderField.js
StringField.js
Textarea.js
TimeField.js
TreeField.js
TypeField.js
UneditableField.js
UpperCaseField.js
UrlField.js
VectorField.js
Visus.js
Copyright (c) 2007-2009
Eric Abouaf
. All rights reserved.
Generated by
JsDoc Toolkit
2.0.0 on Wed, 04 Mar 2009 15:41:29 GMT using
neyricjslibs-template
.