Index: datagrid/grids.py =================================================================== --- datagrid/grids.py (revision 11688) +++ datagrid/grids.py (working copy) @@ -7,6 +7,7 @@ from django.template.loader import render_to_string from django.utils.safestring import mark_safe from django.utils.translation import ugettext as _ +from django.views.decorators.cache import cache_control class Column(object): @@ -432,6 +433,7 @@ setattr(profile, self.profile_sort_field, sort_str) profile_dirty = True + print "Saving profile if... %s" % profile_dirty if profile_dirty: profile.save() @@ -539,6 +541,15 @@ 'page_range': self.paginator.page_range, }))) + @cache_control(no_cache=True, no_store=True, max_age=0, + must_revalidate=True) + def render_listview_to_response(self): + """ + Renders the listview to a response, preventing caching in the + process. + """ + return HttpResponse(unicode(self.render_listview())) + def render_to_response(self, template_name, extra_context={}): """ Renders a template containing this datagrid as a context variable. @@ -548,7 +559,7 @@ # If the caller is requesting just this particular grid, return it. if self.request.GET.get('gridonly', False) and \ self.request.GET.get('datagrid-id', None) == self.id: - return HttpResponse(unicode(self.render_listview())) + return self.render_listview_to_response() context = { 'datagrid': self Index: datagrid/templates/datagrid/listview.html =================================================================== --- datagrid/templates/datagrid/listview.html (revision 11688) +++ datagrid/templates/datagrid/listview.html (working copy) @@ -9,7 +9,7 @@ {% for column in datagrid.columns %} - + {% endfor %} @@ -33,22 +33,17 @@ {% paginator %} {% endif %} - -
+ {% for column in datagrid.all_columns %} {% with column.toggle_url as toggle_url %} - - - + + - + + Index: media/js/datagrid.js =================================================================== --- media/js/datagrid.js (revision 11688) +++ media/js/datagrid.js (working copy) @@ -1,80 +1,164 @@ /* Create the DJBLETS namespace if it doesn't exist. */ if (!DJBLETS) { - var DJBLETS = {}; + var DJBLETS = {}; } DJBLETS.datagrids = { - activeMenu: null, - registeredGrids: [], - activeColumns: {}, + activeMenu: null, + activeColumns: {}, - /* - * Registers a datagrid. This will cause drag and drop and column - * customization to be enabled. - * - * @param {string} datagrid_id The ID of the datagrid. - * @param {array} activeColumns The list of active columns in order. - */ - registerDataGrid: function(datagrid_id, activeColumns) { - this.registeredGrids.push(datagrid_id); - this.activeColumns[datagrid_id] = activeColumns; - }, + /* + * Registers a datagrid. This will cause drag and drop and column + * customization to be enabled. + * + * @param {HTMLElement} grid The datagrid element. + */ + registerDataGrid: function(grid) { + this.activeColumns[grid] = []; - /* - * Hides the currently open columns menu. - */ - hideColumnsMenu: function() { - this.activeMenu.hide(); - this.activeMenu = null; - }, + var cols = grid.getElementsByTagName("col"); + for (var j = 0; j < cols.length; j++) { + if (cols[j].className != "datagrid-customize") { + this.activeColumns[grid].push(cols[j].className); + } + } - /* - * Toggles the visibility of the specified columns menu. - * - * @param {string} menu_id The ID of the menu. - * @param {HTMLElement} elid The element ID of the link that - * called this function. - * @param {event} evt The event that triggered this, if any. - */ - toggleColumnsMenu: function(menu_id, elid, evt) { - var el = getEl(elid); - var menu = getEl(menu_id); + var headers = grid.getElementsByTagName("th"); - if (menu.isVisible()) { - this.hideColumnsMenu(); - } else { - el.beginMeasure(); - xy = el.getXY() - el.endMeasure(); - menu.moveTo(xy[0] - menu.getWidth() + el.getWidth(), - xy[1] + el.getHeight()); - menu.show(); - this.activeMenu = menu; - } + for (var j = 0; j < headers.length; j++) { + var header = getEl(headers[j]); + header.unselectable(); - if (evt) { - YAHOO.util.Event.stopEvent(evt); - } - }, + if (!header.hasClass("edit-columns")) { + new DJBLETS.datagrids.DDColumn(header, grid); + } + } + }, - /* - * Callback handler for when the page finishes loading. Enables - * drag and drop for the datagrids. - */ - onPageLoad: function() { - for (var i = 0; i < this.registeredGrids.length; i++) { - var grid = getEl(this.registeredGrids[i]); - var headers = grid.getChildrenByTagName("th"); + /* + * Unregisters a datagrid. This is used when we're getting ready to + * reload a grid. + * + * @param {HTMLElement} grid The datagrid. + */ + unregisterDataGrid: function(grid) { + this.activeColumns[grid] = []; + }, - for (var j = 0; j < headers.length; j++) { - headers[j].unselectable(); + /* + * Hides the currently open columns menu. + */ + hideColumnsMenu: function() { + if (this.activeMenu != null) { + this.activeMenu.hide(); + this.activeMenu = null; + } + }, - if (!headers[j].hasClass("edit-columns")) { - new DJBLETS.datagrids.DDColumn(headers[j], grid); - } - } - } - } + /* + * Toggles the visibility of the specified columns menu. + * + * @param {string} menu_id The ID of the menu. + * @param {HTMLElement} elid The element ID of the link that + * called this function. + * @param {event} evt The event that triggered this, if any. + */ + toggleColumnsMenu: function(menu_id, elid, evt) { + var el = getEl(elid); + var menu = getEl(menu_id); + + if (menu.isVisible()) { + this.hideColumnsMenu(); + } else { + el.beginMeasure(); + xy = el.getXY() + el.endMeasure(); + menu.moveTo(xy[0] - menu.getWidth() + el.getWidth(), + xy[1] + el.getHeight()); + menu.show(); + this.activeMenu = menu; + } + + if (evt) { + YAHOO.util.Event.stopEvent(evt); + } + }, + + /* + * Callback handler for when the page finishes loading. Registers + * the grids and enables drag and drop for the datagrids. + */ + onPageLoad: function() { + var grids = YAHOO.util.Dom.getElementsByClassName("datagrid-wrapper", + "div"); + for (var i = 0; i < grids.length; i++) { + this.registerDataGrid(grids[i]); + } + }, + + /* + * Saves the new columns list on the server. + * + * @param {{string}} gridId The ID of the datagrid. + * @param {{string}} columnsStr The columns to display. + * @param {{function}} onSuccess Optional callback on successful save. + */ + saveColumns: function(gridId, columnsStr, onSuccess) { + var url = window.location.pathname + + "?gridonly=1&datagrid-id=" + gridId + + "&columns=" + columnsStr; + + YAHOO.util.Connect.asyncRequest("GET", url, { + success: onSuccess + }); + }, + + /* + * Toggles the visibility of a column. This will build the resulting + * columns string and request a save of the columns, followed by a + * reload of the page. + * + * @param {{string}} gridId The ID of the datagrid. + * @param {{string}} columnId The ID of the column to toggle. + */ + toggleColumn: function(gridId, columnId) { + var addingColumn = true; + var grid = document.getElementById(gridId); + var curColumns = this.activeColumns[grid]; + var newColumnsStr = ""; + + for (var i = 0; i < curColumns.length; i++) { + if (curColumns[i] == columnId) { + /* We're removing this column. */ + addingColumn = false; + } else { + newColumnsStr += curColumns[i]; + + if (i < curColumns.length - 1) { + newColumnsStr += ","; + } + } + } + + if (addingColumn) { + newColumnsStr += "," + columnId; + } + + this.saveColumns(gridId, newColumnsStr, function(res) { + this.hideColumnsMenu(); + this.unregisterDataGrid(gridId); + + /* The resulting text *should* be datagrid HTML. */ + var oldEl = getEl(gridId); + oldEl.dom.id = ""; + + YAHOO.ext.DomHelper.insertHtml("beforeBegin", oldEl.dom, + res.responseText); + oldEl.remove(); + + this.registerDataGrid(document.getElementById(gridId)); + }.createDelegate(this)); + } } @@ -89,229 +173,219 @@ * @param {Element} grid The datagrid element. */ DJBLETS.datagrids.DDColumn = function(el, grid) { - this.grid = grid; - this.el = el; - DJBLETS.datagrids.DDColumn.superclass.constructor.apply(this, [ - YAHOO.util.Dom.generateId(el.dom), "datagrid-columns", { - resizeFrame: false - } - ]); + this.grid = grid; + this.el = el; + DJBLETS.datagrids.DDColumn.superclass.constructor.apply(this, [ + YAHOO.util.Dom.generateId(el.dom), "datagrid-columns", { + resizeFrame: false + } + ]); } YAHOO.extendX(DJBLETS.datagrids.DDColumn, YAHOO.util.DDProxy, { - grid: null, - el: null, - lastX: 0, - columnMidpoints: [], - columns: [], - dragIndex: 0, + grid: null, + el: null, + lastX: 0, + columnMidpoints: [], + columns: [], + dragIndex: 0, - /* - * Initializes the object. This just wraps DDProxy.init and calls - * initConstraints(). - */ - init: function() { - DJBLETS.datagrids.DDColumn.superclass.init.apply(this, arguments); - this.initConstraints(); - }, + /* + * Initializes the object. This just wraps DDProxy.init and calls + * initConstraints(). + */ + init: function() { + DJBLETS.datagrids.DDColumn.superclass.init.apply(this, arguments); + this.initConstraints(); + }, - /* - * Sets up the movement constraints for this column. This locks the - * column into the column header region. It has the effect of only - * allowing the column to slide left and right. - */ - initConstraints: function() { - var thead = this.grid.getChildrenByTagName("thead")[0]; - var headerRegion = thead.getRegion(); - var colRegion = this.el.getRegion(); + /* + * Sets up the movement constraints for this column. This locks the + * column into the column header region. It has the effect of only + * allowing the column to slide left and right. + */ + initConstraints: function() { + var thead = getEl(this.grid.getElementsByTagName("thead")[0]); + var headerRegion = thead.getRegion(); + var colRegion = this.el.getRegion(); - this.setXConstraint(colRegion.left - headerRegion.left, - headerRegion.right - colRegion.right); - this.setYConstraint(colRegion.top - headerRegion.top, - headerRegion.bottom - colRegion.bottom); + this.setXConstraint(colRegion.left - headerRegion.left, + headerRegion.right - colRegion.right); + this.setYConstraint(colRegion.top - headerRegion.top, + headerRegion.bottom - colRegion.bottom); - YAHOO.ext.EventManager.onWindowResize(this.initConstraints, this, true); - }, + YAHOO.ext.EventManager.onWindowResize(this.initConstraints, this, true); + }, - /* - * Handles the beginning of the drag. - * - * Creates the proxy element and builds the column information needed - * for determining when we should switch columns. - * - * @param {int} x The X position of the mousedown. - * @param {int} y The Y position of the mousedown. - */ - startDrag: function(x, y) { - var dragEl = getEl(this.getDragEl()); - this.el.hide(); + /* + * Handles the beginning of the drag. + * + * Creates the proxy element and builds the column information needed + * for determining when we should switch columns. + * + * @param {int} x The X position of the mousedown. + * @param {int} y The Y position of the mousedown. + */ + startDrag: function(x, y) { + var dragEl = getEl(this.getDragEl()); + this.el.hide(); - dragEl.setStyle("border", ""); - dragEl.dom.innerHTML = this.el.dom.innerHTML; - dragEl.addClass(this.el.dom.className); - dragEl.addClass("datagrid-header-drag"); + dragEl.setStyle("border", ""); + dragEl.dom.innerHTML = this.el.dom.innerHTML; + dragEl.addClass(this.el.dom.className); + dragEl.addClass("datagrid-header-drag"); - /* Account for the padding of the contents in the width and height. */ - dragEl.setWidth(this.el.getWidth()); - dragEl.setHeight(this.el.getHeight()); + /* Account for the padding of the contents in the width and height. */ + dragEl.setWidth(this.el.getWidth()); + dragEl.setHeight(this.el.getHeight()); - this.buildColumnInfo(); - }, + this.buildColumnInfo(); + }, - /* - * Handles the end of a drag. - * - * This removes the proxy element, shows the original header (now in its - * new place) and saves the new arrangement. - * - * @param {event} e The event. - */ - endDrag: function(e) { - var dragEl = getEl(this.getDragEl()); - dragEl.hide(); - this.el.show(); + /* + * Handles the end of a drag. + * + * This removes the proxy element, shows the original header (now in its + * new place) and saves the new arrangement. + * + * @param {event} e The event. + */ + endDrag: function(e) { + var dragEl = getEl(this.getDragEl()); + dragEl.hide(); + this.el.show(); - this.columnMidpoints = []; + this.columnMidpoints = []; - this.saveColumns(); - }, + /* Build the new columns list. */ + var columns = DJBLETS.datagrids.activeColumns[this.grid]; + var columnsStr = ""; - /* - * Handles movement while in drag mode. - * - * This will check if we've crossed the midpoint of a column. If so, we - * switch the columns. - * - * @param {event} e The event. - */ - onDrag: function(e) { - /* - * Check the direction we're moving and see if we're ready to switch - * with another column. - */ - var x = YAHOO.util.Event.getPageX(e); + for (var i = 0; i < columns.length; i++) { + columnsStr += columns[i]; - if (x == this.lastX) { - /* No change that we care about. Bail out. */ - return; - } + if (i != columns.length - 1) { + columnsStr += ","; + } + } - var dragEl = getEl(this.getDragEl()); - var hitX = -1; - var index = -1; + DJBLETS.datagrids.saveColumns(this.grid.id, columnsStr); + }, - if (x < this.lastX) { - index = this.dragIndex - 1; - hitX = dragEl.getX(); - } else { - index = this.dragIndex + 1; - hitX = dragEl.getRight(); - } + /* + * Handles movement while in drag mode. + * + * This will check if we've crossed the midpoint of a column. If so, we + * switch the columns. + * + * @param {event} e The event. + */ + onDrag: function(e) { + /* + * Check the direction we're moving and see if we're ready to switch + * with another column. + */ + var x = YAHOO.util.Event.getPageX(e); - if (index >= 0 && index < this.columnMidpoints.length) { - /* Check that we're dragging past the midpoint. If so, swap. */ - if (x < this.lastX && hitX <= this.columnMidpoints[index]) { - this.swapColumnBefore(this.dragIndex, index); - } else if (x > this.lastX && hitX >= this.columnMidpoints[index]) { - this.swapColumnBefore(index, this.dragIndex); - } - } + if (x == this.lastX) { + /* No change that we care about. Bail out. */ + return; + } - this.lastX = x; - }, + var dragEl = getEl(this.getDragEl()); + var hitX = -1; + var index = -1; - /* - * Builds the necessary information on the columns. - * - * This will construct an array of midpoints that are used to determine - * when we should swap columns during a drag. It also sets the index - * of the currently dragged column. - */ - buildColumnInfo: function() { - /* Grab the list of midpoints for each column. */ - this.columnMidpoints = []; - var columns = this.grid.getChildrenByTagName("th"); + if (x < this.lastX) { + index = this.dragIndex - 1; + hitX = dragEl.getX(); + } else { + index = this.dragIndex + 1; + hitX = dragEl.getRight(); + } - for (var i = 0; i < columns.length; i++) { - if (!columns[i].hasClass("edit-columns")) { - this.columnMidpoints.push(columns[i].getX() + - columns[i].getWidth() / 2); + if (index >= 0 && index < this.columnMidpoints.length) { + /* Check that we're dragging past the midpoint. If so, swap. */ + if (x < this.lastX && hitX <= this.columnMidpoints[index]) { + this.swapColumnBefore(this.dragIndex, index); + } else if (x > this.lastX && hitX >= this.columnMidpoints[index]) { + this.swapColumnBefore(index, this.dragIndex); + } + } - if (columns[i] == this.el) { - this.dragIndex = i; - } - } - } - }, + this.lastX = x; + }, - /* - * Swaps two columns, placing the first before the second. - * - * It is assumed that the two columns are siblings. Horrible disfiguring - * things might happen if this isn't the case, or it might not. Who - * can tell. Our code behaves, though. - * - * @param {int} index The index of the column to move. - * @param {int} beforeIndex The index of the column to place the first - * before. - */ - swapColumnBefore: function(index, beforeIndex) { - /* Swap the column info. */ - var colTags = this.grid.getChildrenByTagName("col"); - colTags[index].insertBefore(colTags[beforeIndex]); + /* + * Builds the necessary information on the columns. + * + * This will construct an array of midpoints that are used to determine + * when we should swap columns during a drag. It also sets the index + * of the currently dragged column. + */ + buildColumnInfo: function() { + /* Grab the list of midpoints for each column. */ + this.columnMidpoints = []; + var columns = getEl(this.grid).getChildrenByTagName("th"); - /* Swap the list of active columns */ - var tempName = DJBLETS.datagrids.activeColumns[this.grid.id][index]; - DJBLETS.datagrids.activeColumns[this.grid.id][index] = - DJBLETS.datagrids.activeColumns[this.grid.id][beforeIndex]; - DJBLETS.datagrids.activeColumns[this.grid.id][beforeIndex] = tempName; + for (var i = 0; i < columns.length; i++) { + if (!columns[i].hasClass("edit-columns")) { + this.columnMidpoints.push(columns[i].getX() + + columns[i].getWidth() / 2); - /* Swap the cells. This will include the headers. */ - var table = this.grid.getChildrenByTagName("table")[0].dom; - for (var i = 0; i < table.rows.length; i++) { - var row = table.rows[i]; - var cell = row.cells[index]; - var beforeCell = row.cells[beforeIndex]; + if (columns[i] == this.el) { + this.dragIndex = i; + } + } + } + }, - row.insertBefore(cell, beforeCell); + /* + * Swaps two columns, placing the first before the second. + * + * It is assumed that the two columns are siblings. Horrible disfiguring + * things might happen if this isn't the case, or it might not. Who + * can tell. Our code behaves, though. + * + * @param {int} index The index of the column to move. + * @param {int} beforeIndex The index of the column to place the first + * before. + */ + swapColumnBefore: function(index, beforeIndex) { + /* Swap the column info. */ + var colTags = getEl(this.grid).getChildrenByTagName("col"); + colTags[index].insertBefore(colTags[beforeIndex]); - /* Switch the colspans. */ - var tempColSpan = cell.colSpan; - cell.colSpan = beforeCell.colSpan; - beforeCell.colSpan = tempColSpan; - } + /* Swap the list of active columns */ + var tempName = DJBLETS.datagrids.activeColumns[this.grid][index]; + DJBLETS.datagrids.activeColumns[this.grid][index] = + DJBLETS.datagrids.activeColumns[this.grid][beforeIndex]; + DJBLETS.datagrids.activeColumns[this.grid][beforeIndex] = tempName; - /* Everything has changed, so rebuild our view of things. */ - this.buildColumnInfo(); - }, + /* Swap the cells. This will include the headers. */ + var table = getEl(this.grid).getChildrenByTagName("table")[0].dom; + for (var i = 0; i < table.rows.length; i++) { + var row = table.rows[i]; + var cell = row.cells[index]; + var beforeCell = row.cells[beforeIndex]; - /* - * Saves the new columns list on the server. - */ - saveColumns: function() { - var columns = ""; - var grid_id = this.grid.id; - var len = DJBLETS.datagrids.activeColumns[grid_id].length; + row.insertBefore(cell, beforeCell); - for (var i = 0; i < len; i++) { - columns += DJBLETS.datagrids.activeColumns[grid_id][i]; + /* Switch the colspans. */ + var tempColSpan = cell.colSpan; + cell.colSpan = beforeCell.colSpan; + beforeCell.colSpan = tempColSpan; + } - if (i != len - 1) { - columns += ","; - } - } - - var url = window.location.pathname + - "?gridonly=1&datagrid-id=" + grid_id + "&columns=" + columns; - - YAHOO.util.Connect.asyncRequest("GET", url); - } + /* Everything has changed, so rebuild our view of things. */ + this.buildColumnInfo(); + } }); YAHOO.util.Event.on(window, "load", DJBLETS.datagrids.onPageLoad.createDelegate(DJBLETS.datagrids)); YAHOO.util.Event.on(document, "click", function(e) { - if (DJBLETS.datagrids.activeMenu != null) { - DJBLETS.datagrids.hideColumnsMenu(); - } + if (DJBLETS.datagrids.activeMenu != null) { + DJBLETS.datagrids.hideColumnsMenu(); + } });