PERFECT! That code made it look exactly as I wanted it to render! Thanks so much!
-Chad On Mar 19, 8:28 pm, David Huynh <[email protected]> wrote: > On 3/19/2010 2:34 PM, Chad C wrote: > > > > > I am sure there is a way to do this but I cannot figure it out with my > > limited knowledge of Exhibit: > > > I am using a tabular view to show all of the information in my > > database but the default formatting of the view is backwards from what > > I need to use. I currently have this in my HTML: > > > <div ex:role="view" ex:viewClass="Tabular" > > ex:columns=".label, .manufacturer, .pocketdesktop, .patterns, > > .formats, .bestformat, .micplacement, .speaker, .inputs, .phantom, > > .usb, .tuner, .metronome, .memorysize, .maxmemory, .windscreen, > > .batteries, .externalpower, .plugplay, .backlight, .pitchcontrol, > > .playbackspeed, .accessories"> > > </div> > > > As formatted this displays with the .label on the left side of the > > screen and the other columns running from left to right next to it. I > > need the thing to be transposed with the .label on the top of the > > screen and the other information below it scrolling down the page. It > > is supposed to be a comparison chart of digital audio recorders with > > each column of the table representing the data for one individual model. > > > Is there a way to make Exhibit format it like this? > > I'm afraid not. But if you append the code below after including > exhibit-api.js, then I think the table will render sideways. I haven't > tested the code myself yet. > > David > ----- > > <script> > Exhibit.TabularView.prototype._reconstruct = function() { > var self = this; > var collection = this._uiContext.getCollection(); > var database = this._uiContext.getDatabase(); > > var bodyDiv = this._dom.bodyDiv; > bodyDiv.innerHTML = ""; > > /* > * Get the current collection and check if it's empty > */ > var items = []; > var originalSize = collection.countAllItems(); > if (originalSize > 0) { > var currentSet = collection.getRestrictedItems(); > currentSet.visit(function(itemID) { items.push({ id: > itemID, sortKey: "" }); }); > } > > if (items.length > 0) { > /* > * Sort the items > */ > var sortColumn = this._columns[this._settings.sortColumn]; > items.sort(this._createSortFunction(items, > sortColumn.expression, this._settings.sortAscending)); > > /* > * Create the column headers > */ > var htmlColumns = []; > > var htmlColumnHeader = []; > htmlColumns.push(htmlColumnHeader); > > var createColumnHeader = function(i) { > var column = self._columns[i]; > if (column.label == null) { > column.label = self._getColumnLabel(column.expression); > } > > var td = document.createElement("th"); > htmlColumnHeader.push(td); > > Exhibit.TabularView.createColumnHeader( > exhibit, td, column.label, i == > self._settings.sortColumn, self._settings.sortAscending, > function(elmt, evt, target) { > self._doSort(i); > SimileAjax.DOM.cancelEvent(evt); > return false; > } > ); > }; > for (var i = 0; i < this._columns.length; i++) { > createColumnHeader(i); > } > > /* > * Create item rows > */ > var renderItem = function(i) { > var item = items[i]; > > var htmlColumn = []; > htmlColumns.push(htmlColumn); > > for (var c = 0; c < self._columns.length; c++) { > var column = self._columns[c]; > var td = document.createElement("td"); > htmlColumn.push(td); > > var results = column.expression.evaluate( > { "value" : item.id }, > { "value" : "item" }, > "value", > database > ); > > var valueType = column.format == "list" ? > results.valueType : column.format; > column.uiContext.formatList( > results.values, > results.size, > valueType, > function(elmt) { td.appendChild(elmt); } > ); > > if (column.styler != null) { > column.styler(item.id, database, td); > } > } > > if (self._settings.rowStyler != null) { > self._settings.rowStyler(item.id, database, tr, i); > } > }; > for (var i = 0; i < items.length; i++) { > renderItem(i); > } > > /* > * Construct the table > */ > var table = document.createElement("table"); > table.className = "exhibit-tabularView-body"; > if (this._settings.tableStyler != null) { > this._settings.tableStyler(table, database); > } else { > table.cellSpacing = this._settings.cellSpacing; > table.cellPadding = this._settings.cellPadding; > table.border = this._settings.border; > } > > var rowCount = htmlColumns[0].length; > for (var r = 0; r < rowCount; r++) { > var tr = table.insertRow(table.rows.length); > > for (var c = 0; c < htmlColumns.length; c++) { > tr.appendChild(htmlColumns[c][r]); > } > } > > bodyDiv.appendChild(table); > } > }; > </script> -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
