(function(SKY,$){ var defaultOptions = { url: null, rows: [], columns: [], pagification: { rows: 25, }, select: null, }; var defaultColumn = { type: "string", }; class HTML { constructor(skyTable, table){ this.skyTable = skyTable; this.table = table; this.head = $("").appendTo(table); this.body = $("").appendTo(table); this.footer = $("").appendTo(table); this.rowCache = []; this.usedRows = {}; } createRow(){ var self = this; var row = $("") .addClass("skytable skytable-row") .on("click", function(){ self.skyTable.fireRowClick($(this)); }) .on("dblclick", function(){ self.skyTable.fireRowDblClick($(this)); }); for (var n=0;n") .addClass("skytable skytable-cell") .appendTo(row); } return row.get(0); } attachDataRow(iRow){ if (this.rowCache.length == 0) this.rowCache.push(this.createRow()); var row = this.skyTable.data.rows[iRow]; var htmlRow = $(this.rowCache.pop()); htmlRow.data( "data-row", row ); htmlRow.data( "data-row-index", iRow ); var cells = $("td", htmlRow); for (var n=0;n") .addClass("skytable skytable-head") .appendTo(this.head); for (var n=0;n") .text(this.skyTable.columns[n].label) .addClass("skytable skytable-head") .appendTo(this.columnHeader); } } } class DATA { constructor(skyTable){ this.skyTable = skyTable; this.rows= skyTable.options.rows; this.firstrow = 0; this.selectedRows = []; } getLastRow(){ var lastRow = this.firstrow + this.skyTable.options.pagification.rows; if (lastRow > this.rows.length) lastRow = this.rows.length; return lastRow; } deselect(iRow){ var si = this.selectedRows.indexOf(iRow); if (si != -1) { this.selectedRows.splice(si,1); var htmlRow = this.skyTable.html.get(iRow); if (htmlRow) $(htmlRow).removeClass("selected"); this.skyTable.fire("deselect", { index: iRow, row: this.rows[iRow] } ); } } select(iRow){ if (!this.selectedRows.includes(iRow)){ this.selectedRows.push(iRow); var htmlRow = this.skyTable.html.get(iRow); if (htmlRow) $(htmlRow).addClass("selected"); this.skyTable.fire("select", { index: iRow, row: this.rows[iRow] } ); } } toggleSelect(iRow){ if (this.skyTable.options.select == "single") { var doSelection = (!this.selectedRows.includes(iRow)); while (this.selectedRows.length) this.deselect(this.selectedRows[0]); if (doSelection) this.select(iRow); } else if (this.skyTable.options.select == "multi") { if (!this.selectedRows.includes(iRow)) this.select(iRow); else this.deselect(iRow); } } } $.fn.skyTable = function(opt){ if (this.length != 1) throw "SkyTable must be constructed on exactly one "; var self = this.get(0); if (self.tagName != "TABLE") self = this.parents("table").get(0); if (!self) throw "can't identify skyTable Element"; var skyTable = $(self).data( "sky.skyTable"); if (skyTable){ if (arguments.length) throw "can't reinitialize SkyTable without prior destroy()"; return skyTable; } class SkyTable extends SKY.prototypes.SKYBase{ constructor(t){ super(); var me = this; this.options = Object.assign( {}, defaultOptions, opt ); this.columns = [] t = $(t); t .data( "sky.skyTable", this) .addClass("skytable"); this.html = new HTML(this, t); this.data = new DATA(this); for (var key in this.options.columns){ var column = this.options.columns[key]; var skyColumn = Object.assign( {}, defaultColumn, column ); skyColumn.type = SKY.controls.getControl(skyColumn.type); this.columns.push( skyColumn ); } this.html.initializeHeader(); this.refresh(); } reset(){ me.html.empty(); } rows(rows){ if (arguments.length == 0) return me.currentRows; me.reset(); } refresh(){ this.html.empty(); var lastRow = this.data.getLastRow(); for (var n = this.data.firstrow;n < lastRow; n++){ this.html.attachDataRow( n ); } return this; } fireRowClick(row){ if (this.options.select) this.data.toggleSelect( row.data("data-row-index") ); else this.fire( "click", { index: row.data("data-row-index") , row: row.data("data-row") }); } fireRowDblClick(row){ this.fire( "dblclick", { index: row.data("data-row-index") , row: row.data("data-row") }); } } return new SkyTable(self); }; }(SKY,jQuery));