3 * Copyright (c) 2007 Andrew Tetlaw & Millstream Web Software
4 * http://www.millstream.com.au/view/code/tablekit/
5 * Version: 1.2.1 2007-03-11
7 * Permission is hereby granted, free of charge, to any person
8 * obtaining a copy of this software and associated documentation
9 * files (the "Software"), to deal in the Software without
10 * restriction, including without limitation the rights to use, copy,
11 * modify, merge, publish, distribute, sublicense, and/or sell copies
12 * of the Software, and to permit persons to whom the Software is
13 * furnished to do so, subject to the following conditions:
15 * The above copyright notice and this permission notice shall be
16 * included in all copies or substantial portions of the Software.
18 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
19 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
20 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
21 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
22 * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
23 * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
24 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
29 // Use the TableKit class constructure if you'd prefer to init your tables as JS objects
30 var TableKit = Class.create();
32 TableKit.prototype = {
33 initialize : function(elm, options) {
35 if(table.tagName !== "TABLE") {
38 TableKit.register(table,Object.extend(TableKit.options,options || {}));
40 var op = TableKit.option('sortable resizable editable', this.id);
42 TableKit.Sortable.init(table);
45 TableKit.Resizable.init(table);
48 TableKit.Editable.init(table);
51 sort : function(column, order) {
52 TableKit.Sortable.sort(this.id, column, order);
54 resizeColumn : function(column, w) {
55 TableKit.Resizable.resize(this.id, column, w);
57 editCell : function(row, column) {
58 TableKit.Editable.editCell(this.id, row, column);
62 Object.extend(TableKit, {
63 getBodyRows : function(table) {
66 if(!TableKit.rows[id]) {
67 TableKit.rows[id] = (table.tHead && table.tHead.rows.length > 0) ? $A(table.tBodies[0].rows) : $A(table.rows).without(table.rows[0]);
69 return TableKit.rows[id];
71 getHeaderCells : function(table, cell) {
72 if(!table) { table = $(cell).up('table'); }
74 if(!TableKit.heads[id]) {
75 //TableKit.heads[id] = $A((table.tHead && table.tHead.rows.length > 0) ? table.tHead.rows[table.tHead.rows.length-1].cells : table.rows[0].cells);
76 TableKit.heads[id] = $A((table.tHead && table.tHead.rows.length > 0) ? table.tHead.rows[0].cells : table.rows[0].cells);
78 return TableKit.heads[id];
80 getCellIndex : function(cell) {
81 return $A(cell.parentNode.cells).indexOf(cell);
83 getRowIndex : function(row) {
84 return $A(row.parentNode.rows).indexOf(row);
86 getCellText : function(cell, refresh) {
87 if(!cell) { return ""; }
88 TableKit.registerCell(cell);
89 var data = TableKit.cells[cell.id];
90 if(refresh || data.refresh || !data.textContent) {
91 data.textContent = cell.textContent ? cell.textContent : cell.innerText;
94 return data.textContent;
96 register : function(table, options) {
98 TableKit._tblcount += 1;
99 table.id = "tablekit-table-" + TableKit._tblcount;
102 TableKit.tables[id] = TableKit.tables[id] ? Object.extend(TableKit.tables[id], options || {}) : Object.extend({sortable:false,resizable:false,editable:false}, options || {});
104 registerCell : function(cell) {
106 TableKit._cellcount += 1;
107 cell.id = "tablekit-cell-" + TableKit._cellcount;
109 if(!TableKit.cells[cell.id]) {
110 TableKit.cells[cell.id] = {textContent : '', htmlContent : '', active : false};
113 isSortable : function(table) {
114 return TableKit.tables[table.id] ? TableKit.tables[table.id].sortable : false;
116 isResizable : function(table) {
117 return TableKit.tables[table.id] ? TableKit.tables[table.id].resizable : false;
119 isEditable : function(table) {
120 return TableKit.tables[table.id] ? TableKit.tables[table.id].editable : false;
122 setup : function(o) {
123 Object.extend(TableKit.options, o || {} );
125 option : function(s, id, o1, o2) {
126 o1 = o1 || TableKit.options;
127 o2 = o2 || (id ? (TableKit.tables[id] ? TableKit.tables[id] : {}) : {});
129 if(!TableKit._opcache[key]){
130 TableKit._opcache[key] = $A($w(s)).inject([],function(a,v){
131 a.push(a[v] = o2[v] || o1[v]);
135 return TableKit._opcache[key];
137 e : function(event) {
138 return event || window.event;
151 rowEvenClass : 'roweven',
152 rowOddClass : 'rowodd',
153 sortableSelector : ['table.sortable'],
154 columnClass : 'sortcol',
155 descendingClass : 'sortdesc',
156 ascendingClass : 'sortasc',
157 noSortClass : 'nosort',
158 sortFirstAscendingClass : 'sortfirstasc',
159 sortFirstDecendingClass : 'sortfirstdesc',
160 resizableSelector : ['table.resizable'],
163 resizeOnHandleClass : 'resize-handle-active',
164 editableSelector : ['table.editable'],
165 formClassName : 'editable-cell-form',
166 noEditClass : 'noedit',
173 if(TableKit.options.autoLoad) {
174 if(TableKit.options.sortable) {
175 $A(TableKit.options.sortableSelector).each(function(s){
176 $$(s).each(function(t) {
177 TableKit.Sortable.init(t);
181 if(TableKit.options.resizable) {
182 $A(TableKit.options.resizableSelector).each(function(s){
183 $$(s).each(function(t) {
184 TableKit.Resizable.init(t);
188 if(TableKit.options.editable) {
189 $A(TableKit.options.editableSelector).each(function(s){
190 $$(s).each(function(t) {
191 TableKit.Editable.init(t);
200 stripe : function(table) {
201 var rows = TableKit.getBodyRows(table);
202 rows.each(function(r,i) {
203 TableKit.Rows.addStripeClass(table,r,i);
206 addStripeClass : function(t,r,i) {
207 t = t || r.up('table');
208 var op = TableKit.option('rowEvenClass rowOddClass', t.id);
209 var css = ((i+1)%2 === 0 ? op[0] : op[1]);
210 // using prototype's assClassName/RemoveClassName was not efficient for large tables, hence:
211 var cn = r.className.split(/\s+/);
213 for(var x = 0, l = cn.length; x < l; x += 1) {
214 if(cn[x] !== op[0] && cn[x] !== op[1]) { newCn.push(cn[x]); }
217 r.className = newCn.join(" ");
221 TableKit.Sortable = {
222 init : function(elm, options){
224 if(table.tagName !== "TABLE") {
227 TableKit.register(table,Object.extend(options || {},{sortable:true}));
229 var cells = TableKit.getHeaderCells(table);
230 var op = TableKit.option('noSortClass columnClass sortFirstAscendingClass sortFirstDecendingClass', table.id);
231 cells.each(function(c){
233 if(!c.hasClassName(op.noSortClass)) {
234 Event.observe(c, 'mousedown', TableKit.Sortable._sort);
235 c.addClassName(op.columnClass);
236 if(c.hasClassName(op.sortFirstAscendingClass) || c.hasClassName(op.sortFirstDecendingClass)) {
243 if(sortFirst.hasClassName(op.sortFirstAscendingClass)) {
244 TableKit.Sortable.sort(table, sortFirst, 1);
246 TableKit.Sortable.sort(table, sortFirst, -1);
248 } else { // just add row stripe classes
249 TableKit.Rows.stripe(table);
252 reload : function(table) {
254 var cells = TableKit.getHeaderCells(table);
255 var op = TableKit.option('noSortClass columnClass', table.id);
256 cells.each(function(c){
258 if(!c.hasClassName(op.noSortClass)) {
259 Event.stopObserving(c, 'mousedown', TableKit.Sortable._sort);
260 c.removeClassName(op.columnClass);
263 TableKit.Sortable.init(table);
265 _sort : function(e) {
266 if(TableKit.Resizable._onHandle) {return;}
269 var cell = Event.element(e);
270 while(!(cell.tagName && cell.tagName.match(/td|th/gi))) {
271 cell = cell.parentNode;
273 TableKit.Sortable.sort(null, cell);
275 sort : function(table, index, order) {
277 if(typeof index === 'number') {
278 if(!table || (table.tagName && table.tagName !== "TABLE")) {
282 index = Math.min(table.rows[0].cells.length, index);
283 index = Math.max(1, index);
285 cell = (table.tHead && table.tHead.rows.length > 0) ? $(table.tHead.rows[table.tHead.rows.length-1].cells[index]) : $(table.rows[0].cells[index]);
288 table = table ? $(table) : cell.up('table');
289 index = TableKit.getCellIndex(cell);
291 var op = TableKit.option('noSortClass descendingClass ascendingClass', table.id);
293 if(cell.hasClassName(op.noSortClass)) {return;}
295 order = order ? order : (cell.hasClassName(op.descendingClass) ? 1 : -1);
296 var rows = TableKit.getBodyRows(table);
298 if(cell.hasClassName(op.ascendingClass) || cell.hasClassName(op.descendingClass)) {
299 rows.reverse(); // if it was already sorted we just need to reverse it.
301 var datatype = TableKit.Sortable.getDataType(cell,index,table);
302 var tkst = TableKit.Sortable.types;
303 rows.sort(function(a,b) {
304 return order * tkst[datatype].compare(TableKit.getCellText(a.cells[index]),TableKit.getCellText(b.cells[index]));
307 var tb = table.tBodies[0];
308 var tkr = TableKit.Rows;
309 rows.each(function(r,i) {
311 tkr.addStripeClass(table,r,i);
313 var hcells = TableKit.getHeaderCells(null, cell);
314 $A(hcells).each(function(c,i){
316 c.removeClassName(op.ascendingClass);
317 c.removeClassName(op.descendingClass);
320 c.removeClassName(op.descendingClass);
321 c.addClassName(op.ascendingClass);
323 c.removeClassName(op.ascendingClass);
324 c.addClassName(op.descendingClass);
331 addSortType : function() {
332 $A(arguments).each(function(o){
333 TableKit.Sortable.types[o.name] = o;
336 getDataType : function(cell,index,table) {
338 index = (index || index === 0) ? index : TableKit.getCellIndex(cell);
340 var colcache = TableKit.Sortable._coltypecache;
341 var cache = colcache[table.id] ? colcache[table.id] : (colcache[table.id] = {});
345 // first look for a data type id on the heading row cell
346 if(cell.id && TableKit.Sortable.types[cell.id]) {
349 t = cell.classNames().detect(function(n){ // then look for a data type classname on the heading row cell
350 return (TableKit.Sortable.types[n]) ? true : false;
353 var rows = TableKit.getBodyRows(table);
354 cell = rows[0].cells[index]; // grab same index cell from body row to try and match data type
355 t = TableKit.Sortable.detectors.detect(
357 return TableKit.Sortable.types[d].detect(TableKit.getCellText(cell));
367 TableKit.Sortable.detectors = $A($w('date-iso date date-eu date-au time currency datasize number casesensitivetext text')); // setting it here because Safari complained when I did it above...
369 TableKit.Sortable.Type = Class.create();
370 TableKit.Sortable.Type.prototype = {
371 initialize : function(name, options){
373 options = Object.extend({
374 normal : function(v){
379 this.normal = options.normal;
380 this.pattern = options.pattern;
381 if(options.compare) {
382 this.compare = options.compare;
385 this.detect = options.detect;
388 compare : function(a,b){
389 return TableKit.Sortable.Type.compare(this.normal(a), this.normal(b));
391 detect : function(v){
392 return this.pattern.test(v);
396 TableKit.Sortable.Type.compare = function(a,b) {
397 return a < b ? -1 : a === b ? 0 : 1;
400 TableKit.Sortable.addSortType(
401 new TableKit.Sortable.Type('number', {
402 pattern : /^[-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?/,
403 normal : function(v) {
404 // This will grab the first thing that looks like a number from a string, so you can use it to order a column of various srings containing numbers.
405 v = parseFloat(v.replace(/^.*?([-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?).*$/,"$1"));
406 return isNaN(v) ? 0 : v;
408 new TableKit.Sortable.Type('text',{
409 normal : function(v) {
410 return v ? v.toLowerCase() : '';
412 new TableKit.Sortable.Type('casesensitivetext',{pattern : /^[A-Z]+$/}),
413 new TableKit.Sortable.Type('datasize',{
414 pattern : /^[-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?\s?[k|m|g|t]b$/i,
415 normal : function(v) {
416 var r = v.match(/^([-+]?[\d]*\.?[\d]+([eE][-+]?[\d]+)?)\s?([k|m|g|t]?b)?/i);
417 var b = r[1] ? Number(r[1]).valueOf() : 0;
418 var m = r[3] ? r[3].substr(0,1).toLowerCase() : '';
425 result = b * 1024 * 1024;
428 result = b * 1024 * 1024 * 1024;
431 result = b * 1024 * 1024 * 1024 * 1024;
436 new TableKit.Sortable.Type('date-au',{
437 pattern : /^\d{2}\/\d{2}\/\d{4}\s?(?:\d{1,2}\:\d{2}(?:\:\d{2})?\s?[a|p]?m?)?/i,
438 normal : function(v) {
439 if(!this.pattern.test(v)) {return 0;}
440 var r = v.match(/^(\d{2})\/(\d{2})\/(\d{4})\s?(?:(\d{1,2})\:(\d{2})(?:\:(\d{2}))?\s?([a|p]?m?))?/i);
442 var mo_num = parseInt(r[2],10)-1;
444 var hr_num = r[4] ? r[4] : 0;
445 if(r[7] && r[7].toLowerCase().indexOf('p') !== -1) {
446 hr_num = parseInt(r[4],10) + 12;
448 var min_num = r[5] ? r[5] : 0;
449 var sec_num = r[6] ? r[6] : 0;
450 return new Date(yr_num, mo_num, day_num, hr_num, min_num, sec_num, 0).valueOf();
452 new TableKit.Sortable.Type('date-us',{
453 pattern : /^\d{2}\/\d{2}\/\d{4}\s?(?:\d{1,2}\:\d{2}(?:\:\d{2})?\s?[a|p]?m?)?/i,
454 normal : function(v) {
455 if(!this.pattern.test(v)) {return 0;}
456 var r = v.match(/^(\d{2})\/(\d{2})\/(\d{4})\s?(?:(\d{1,2})\:(\d{2})(?:\:(\d{2}))?\s?([a|p]?m?))?/i);
458 var mo_num = parseInt(r[1],10)-1;
460 var hr_num = r[4] ? r[4] : 0;
461 if(r[7] && r[7].toLowerCase().indexOf('p') !== -1) {
462 hr_num = parseInt(r[4],10) + 12;
464 var min_num = r[5] ? r[5] : 0;
465 var sec_num = r[6] ? r[6] : 0;
466 return new Date(yr_num, mo_num, day_num, hr_num, min_num, sec_num, 0).valueOf();
468 new TableKit.Sortable.Type('date-eu',{
469 pattern : /^\d{2}-\d{2}-\d{4}/i,
470 normal : function(v) {
471 if(!this.pattern.test(v)) {return 0;}
472 var r = v.match(/^(\d{2})-(\d{2})-(\d{4})/);
474 var mo_num = parseInt(r[2],10)-1;
476 return new Date(yr_num, mo_num, day_num).valueOf();
478 new TableKit.Sortable.Type('date-iso',{
479 pattern : /[\d]{4}-[\d]{2}-[\d]{2}(?:T[\d]{2}\:[\d]{2}(?:\:[\d]{2}(?:\.[\d]+)?)?(Z|([-+][\d]{2}:[\d]{2})?)?)?/, // 2005-03-26T19:51:34Z
480 normal : function(v) {
481 if(!this.pattern.test(v)) {return 0;}
482 var d = v.match(/([\d]{4})(-([\d]{2})(-([\d]{2})(T([\d]{2}):([\d]{2})(:([\d]{2})(\.([\d]+))?)?(Z|(([-+])([\d]{2}):([\d]{2})))?)?)?)?/);
484 var date = new Date(d[1], 0, 1);
485 if (d[3]) { date.setMonth(d[3] - 1) ;}
486 if (d[5]) { date.setDate(d[5]); }
487 if (d[7]) { date.setHours(d[7]); }
488 if (d[8]) { date.setMinutes(d[8]); }
489 if (d[10]) { date.setSeconds(d[10]); }
490 if (d[12]) { date.setMilliseconds(Number("0." + d[12]) * 1000); }
492 offset = (Number(d[16]) * 60) + Number(d[17]);
493 offset *= ((d[15] === '-') ? 1 : -1);
495 offset -= date.getTimezoneOffset();
497 var time = (Number(date) + (offset * 60 * 1000));
498 date.setTime(Number(time));
500 return date.valueOf();
502 new TableKit.Sortable.Type('date',{
503 pattern: /^(?:sun|mon|tue|wed|thu|fri|sat)\,\s\d{1,2}\s(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)\s\d{4}(?:\s\d{2}\:\d{2}(?:\:\d{2})?(?:\sGMT(?:[+-]\d{4})?)?)?/i, //Mon, 18 Dec 1995 17:28:35 GMT
504 compare : function(a,b) { // must be standard javascript date format
506 return TableKit.Sortable.Type.compare(new Date(a),new Date(b));
508 return TableKit.Sortable.Type.compare(a ? 1 : 0, b ? 1 : 0);
511 new TableKit.Sortable.Type('time',{
512 pattern : /^\d{1,2}\:\d{2}(?:\:\d{2})?(?:\s[a|p]m)?$/i,
513 compare : function(a,b) {
515 var ds = d.getMonth() + "/" + d.getDate() + "/" + d.getFullYear() + " ";
516 return TableKit.Sortable.Type.compare(new Date(ds + a),new Date(ds + b));
518 new TableKit.Sortable.Type('currency',{
519 pattern : /^[$£¥
\80¤]/, // dollar,pound,yen,euro,generic currency symbol
520 normal : function(v) {
521 return v ? parseFloat(v.replace(/[^-\d\.]/g,'')) : 0;
525 TableKit.Resizable = {
526 init : function(elm, options){
528 if(table.tagName !== "TABLE") {return;}
529 TableKit.register(table,Object.extend(options || {},{resizable:true}));
530 var cells = TableKit.getHeaderCells(table);
531 cells.each(function(c){
533 //log ("init on " + c.firstChild.nodeValue);
534 Event.observe(c, 'mouseover', TableKit.Resizable.initDetect);
535 Event.observe(c, 'mouseout', TableKit.Resizable.killDetect);
538 reload : function(table) {
540 var cells = TableKit.getHeaderCells(table);
541 cells.each(function(c){
543 Event.stopObserving(c, 'mouseover', TableKit.Resizable.initDetect);
544 Event.stopObserving(c, 'mouseout', TableKit.Resizable.killDetect);
546 TableKit.Resizable.init(table);
548 resize : function(table, index, w) {
550 if(typeof index === 'number') {
551 if(!table || (table.tagName && table.tagName !== "TABLE")) {return;}
553 index = Math.min(table.rows[0].cells.length, index);
554 index = Math.max(1, index);
556 cell = (table.tHead && table.tHead.rows.length > 0) ? $(table.tHead.rows[table.tHead.rows.length-1].cells[index]) : $(table.rows[0].cells[index]);
559 table = table ? $(table) : cell.up('table');
560 index = TableKit.getCellIndex(cell);
562 var pad = parseInt(cell.getStyle('paddingLeft'),10) + parseInt(cell.getStyle('paddingRight'),10);
563 w = Math.max(w-pad, TableKit.option('minWidth', table.id)[0]);
564 cell.setStyle({'width' : w + 'px'});
566 initDetect : function(e) {
568 var cell = Event.element(e);
569 Event.observe(cell, 'mousemove', TableKit.Resizable.detectHandle);
570 Event.observe(cell, 'mousedown', TableKit.Resizable.startResize);
572 detectHandle : function(e) {
574 var cell = Event.element(e);
575 if(TableKit.Resizable.pointerPos(cell,Event.pointerX(e),Event.pointerY(e))){
576 cell.addClassName(TableKit.option('resizeOnHandleClass', cell.up('table').id)[0]);
577 TableKit.Resizable._onHandle = true;
579 cell.removeClassName(TableKit.option('resizeOnHandleClass', cell.up('table').id)[0]);
580 TableKit.Resizable._onHandle = false;
583 killDetect : function(e) {
585 TableKit.Resizable._onHandle = false;
586 var cell = Event.element(e);
587 if (!cell.tagName || cell.tagName != 'TD') return;
588 Event.stopObserving(cell, 'mousemove', TableKit.Resizable.detectHandle);
589 Event.stopObserving(cell, 'mousedown', TableKit.Resizable.startResize);
590 cell.removeClassName(TableKit.option('resizeOnHandleClass', cell.up('table').id)[0]);
592 startResize : function(e) {
594 if(!TableKit.Resizable._onHandle) { return;}
595 var cell = Event.element(e);
596 Event.stopObserving(cell, 'mousemove', TableKit.Resizable.detectHandle);
597 Event.stopObserving(cell, 'mousedown', TableKit.Resizable.startResize);
598 Event.stopObserving(cell, 'mouseout', TableKit.Resizable.killDetect);
599 TableKit.Resizable._cell = cell;
600 var table = cell.up('table');
601 TableKit.Resizable._tbl = table;
602 if(TableKit.option('showHandle', table.id)[0]) {
603 TableKit.Resizable._handle = $(document.createElement('div')).addClassName('resize-handle').setStyle({
604 'top' : Position.cumulativeOffset(cell)[1] + 'px',
605 'left' : Event.pointerX(e) + 'px',
606 'height' : table.getDimensions().height + 'px'
608 document.body.appendChild(TableKit.Resizable._handle);
610 Event.observe(document, 'mousemove', TableKit.Resizable.drag);
611 Event.observe(document, 'mouseup', TableKit.Resizable.endResize);
614 endResize : function(e) {
616 var cell = TableKit.Resizable._cell;
617 TableKit.Resizable.resize(null, cell, (Event.pointerX(e) - Position.cumulativeOffset(cell)[0]));
618 Event.stopObserving(document, 'mousemove', TableKit.Resizable.drag);
619 Event.stopObserving(document, 'mouseup', TableKit.Resizable.endResize);
620 if(TableKit.option('showHandle', TableKit.Resizable._tbl.id)[0]) {
621 $$('div.resize-handle').each(function(elm){
622 document.body.removeChild(elm);
625 Event.observe(cell, 'mouseout', TableKit.Resizable.killDetect);
626 TableKit.Resizable._tbl = TableKit.Resizable._handle = TableKit.Resizable._cell = null;
631 if(TableKit.Resizable._handle === null) {
633 TableKit.Resizable.resize(TableKit.Resizable._tbl, TableKit.Resizable._cell, (Event.pointerX(e) - Position.cumulativeOffset(TableKit.Resizable._cell)[0]));
636 TableKit.Resizable._handle.setStyle({'left' : Event.pointerX(e) + 'px'});
640 pointerPos : function(element, x, y) {
641 var offset = Position.cumulativeOffset(element);
642 return (y >= offset[1] &&
643 y < offset[1] + element.offsetHeight &&
644 x >= offset[0] + element.offsetWidth - 5 &&
645 x < offset[0] + element.offsetWidth);
654 TableKit.Editable = {
655 init : function(elm, options){
657 if(table.tagName !== "TABLE") {return;}
658 TableKit.register(table,Object.extend(options || {},{editable:true}));
659 Event.observe(table.tBodies[0], 'click', TableKit.Editable._editCell);
661 _editCell : function(e) {
663 var cell = Event.findElement(e,'td');
664 TableKit.Editable.editCell(null, cell);
666 editCell : function(table, index, cindex) {
668 if(typeof index === 'number') {
669 if(!table || (table.tagName && table.tagName !== "TABLE")) {return;}
671 index = Math.min(table.tBodies[0].rows.length, index);
672 index = Math.max(1, index);
674 cindex = Math.min(table.rows[0].cells.length, cindex);
675 cindex = Math.max(1, cindex);
677 row = $(table.tBodies[0].rows[index]);
678 cell = $(row.cells[cindex]);
681 table = (table && table.tagName && table.tagName !== "TABLE") ? $(table) : cell.up('table');
684 var op = TableKit.option('noEditClass', table.id);
685 if(cell.hasClassName(op.noEditClass)) {return;}
687 var head = $(TableKit.getHeaderCells(table, cell)[TableKit.getCellIndex(cell)]);
688 if(head.hasClassName(op.noEditClass)) {return;}
690 TableKit.registerCell(cell);
691 var data = TableKit.cells[cell.id];
692 if(data.active) {return;}
693 data.htmlContent = cell.innerHTML;
694 var ftype = TableKit.Editable.types['text-input'];
695 if(head.id && TableKit.Editable.types[head.id]) {
696 ftype = TableKit.Editable.types[head.id];
698 var n = head.classNames().detect(function(n){
699 return (TableKit.Editable.types[n]) ? true : false;
701 ftype = n ? TableKit.Editable.types[n] : ftype;
707 addCellEditor : function(o) {
708 if(o && o.name) { TableKit.Editable.types[o.name] = o; }
712 TableKit.Editable.CellEditor = Class.create();
713 TableKit.Editable.CellEditor.prototype = {
714 initialize : function(name, options){
716 this.options = Object.extend({
718 attributes : {name : 'value', type : 'text'},
723 cancelText : 'Cancel',
728 edit : function(cell) {
730 var op = this.options;
731 var table = cell.up('table');
733 var form = $(document.createElement("form"));
734 form.id = cell.id + '-form';
735 form.addClassName(TableKit.option('formClassName', table.id)[0]);
736 form.onsubmit = this._submit.bindAsEventListener(this);
738 var field = document.createElement(op.element);
739 $H(op.attributes).each(function(v){
740 field[v.key] = v.value;
745 field.value = TableKit.getCellText(cell);
749 var txt = TableKit.getCellText(cell);
750 $A(op.selectOptions).each(function(v){
751 field.options[field.options.length] = new Option(v[0], v[1]);
753 field.options[field.options.length-1].selected = 'selected';
758 form.appendChild(field);
759 if(op.element === 'textarea') {
760 form.appendChild(document.createElement("br"));
763 var okButton = document.createElement("input");
764 okButton.type = "submit";
765 okButton.value = op.submitText;
766 okButton.className = 'editor_ok_button';
767 form.appendChild(okButton);
770 var cancelLink = document.createElement("a");
771 cancelLink.href = "#";
772 cancelLink.appendChild(document.createTextNode(op.cancelText));
773 cancelLink.onclick = this._cancel.bindAsEventListener(this);
774 cancelLink.className = 'editor_cancel';
775 form.appendChild(cancelLink);
778 cell.appendChild(form);
780 _submit : function(e) {
781 var cell = Event.findElement(e,'td');
782 var form = Event.findElement(e,'form');
784 this.submit(cell,form);
786 submit : function(cell, form) {
787 var op = this.options;
788 form = form ? form : cell.down('form');
789 var head = $(TableKit.getHeaderCells(null, cell)[TableKit.getCellIndex(cell)]);
790 var row = cell.up('tr');
791 var table = cell.up('table');
792 var s = '&row=' + (TableKit.getRowIndex(row)+1) + '&cell=' + (TableKit.getCellIndex(cell)+1) + '&id=' + row.id + '&field=' + head.id + '&' + Form.serialize(form);
793 this.ajax = new Ajax.Updater(cell, op.ajaxURI || TableKit.option('editAjaxURI', table.id)[0], Object.extend(op.ajaxOptions || TableKit.option('editAjaxOptions', table.id)[0], {
795 onComplete : function() {
796 var data = TableKit.cells[cell.id];
798 data.refresh = true; // mark cell cache for refreshing, in case cell contents has changed and sorting is applied
802 _cancel : function(e) {
803 var cell = Event.findElement(e,'td');
807 cancel : function(cell) {
809 var data = TableKit.cells[cell.id];
810 cell.innerHTML = data.htmlContent;
811 data.htmlContent = '';
817 TableKit.Editable.textInput = function(n,attributes) {
818 TableKit.Editable.addCellEditor(new TableKit.Editable.CellEditor(n, {
820 attributes : Object.extend({name : 'value', type : 'text'}, attributes||{})
823 TableKit.Editable.textInput('text-input');
825 TableKit.Editable.multiLineInput = function(n,attributes) {
826 TableKit.Editable.addCellEditor(new TableKit.Editable.CellEditor(n, {
827 element : 'textarea',
828 attributes : Object.extend({name : 'value', rows : '5', cols : '20'}, attributes||{})
831 TableKit.Editable.multiLineInput('multi-line-input');
833 TableKit.Editable.selectInput = function(n,attributes,selectOptions) {
834 TableKit.Editable.addCellEditor(new TableKit.Editable.CellEditor(n, {
836 attributes : Object.extend({name : 'value'}, attributes||{}),
837 'selectOptions' : selectOptions
845 TableKit.Bench.bench[0] = new Date().getTime();
848 TableKit.Bench.bench[1] = new Date().getTime();
849 alert(s + ' ' + ((TableKit.Bench.bench[1]-TableKit.Bench.bench[0])/1000)+' seconds.') //console.log(s + ' ' + ((TableKit.Bench.bench[1]-TableKit.Bench.bench[0])/1000)+' seconds.')
850 TableKit.Bench.bench = [];
854 if(window.FastInit) {
855 FastInit.addOnLoad(TableKit.load);
857 Event.observe(window, 'load', TableKit.load);