Skip to content

Commit

Permalink
Item11140: reckon that's as much as I can do to improve performance. …
Browse files Browse the repository at this point in the history 
…Large tables require server-side support, and at this time that means JQGridPlugin.

git-svn-id: http://svn.foswiki.org/trunk@12726 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
  • Loading branch information
CrawfordCurrie authored and CrawfordCurrie committed Oct 7, 2011
1 parent 394059e commit 6cc9cc9
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 57 deletions.
8 changes: 6 additions & 2 deletions EditRowPlugin/data/System/EditRowPlugin.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ One line description, required for extensions repository catalog.

Features:
1 You can edit one row, or even one cell at a time, instead of having to edit the entire
table. This solves the problem with the long page rendering times
required to show all the HTML for a full table edit on big tables.
table.
1 Supports footer rows.
1 Supports sorting columns in tables using Javascript, avoiding the
round-trip to the server required by !TablePlugin.
Expand All @@ -30,6 +29,11 @@ Features:
Javascript table editors to use the same interface to save.
1 (geeky) Tolerant to Javascript being disabled in the browser

Note that this plugin is designed for use with tables of up to ~1000 cells. Tables
larger than this will work, but they put huge stress on the browser and the server.
For manipulating larger tables, you are recommended to investigate
Foswiki:Extensions.JQGridPlugin.

---++ Usage

Works like the !EditTablePlugin (it uses exactly the same =%EDITTABLE= macro)
Expand Down
3 changes: 2 additions & 1 deletion EditRowPlugin/lib/Foswiki/Plugins/EditRowPlugin/TableRow.pm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,8 @@ sub render {
# Add container wrapper for JS.
# We forcibly add the row-drag link here because adding it in JS is so
# slow.
$buttons = "<div class='erpJS_container'><a href='#' class='erp_drag_button ui-icon ui-icon-arrow-2-n-s' title='Click and drag to move row'>move</a>$buttons</div>";
# The JS must add ui-icon, though.
$buttons = "<div class='erpJS_container'><a href='#' class='ui-icon-arrow-2-n-s erp_drag_button' title='Click and drag to move row'>move</a>$buttons</div>";
}
if ($buttons_right) {
push( @cols, $buttons );
Expand Down
111 changes: 57 additions & 54 deletions EditRowPlugin/pub/System/EditRowPlugin/erp_src.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,12 @@
// Cancel the drag
dragee.fadeTo("fast", 1.0);
container.css("cursor", "auto");
alert("Error " + jqXHR.status + " - Failed to move row");
var mess = jqXHR.responseText;
if (mess && mess.indexOf('RESPONSE') == 0)
mess = mess.replace(/^RESPONSE/, ': ');
else
mess = '';
alert("Error " + jqXHR.status + " - Failed to move row" + mess);
}
});
};
Expand All @@ -259,12 +264,12 @@
};

var makeRowDraggable = function(tr) {
var container = tr.closest("thead,tbody,table");

// Add a "drag handle" element to the first cell of the row
tr.find("div.erpJS_container").first().each(
tr.find("div.erpJS_container").first().find("a.erp_drag_button").each(
function () {
var handle = $(this).find("a.erp_drag_button");
var container = tr.closest("thead,tbody,table");
var handle = $(this);
handle.addClass('ui-icon');
handle.draggable({
// constrain to the containing table
containment: container,
Expand All @@ -289,6 +294,15 @@
});
};

var makeRowsDraggable = function(n, rows) {
var to = n + Math.min(200, rows.length - n);
while (n < to) {
makeRowDraggable($(rows[n++]));
}
if (n < rows.length)
window.setTimeout(makeRowsDraggable, 100, n, rows);
};

var editControls = {
onedit: function(settings, self) {
// Hide the edit button
Expand Down Expand Up @@ -377,72 +391,63 @@
// decorate the table with handlers for cell edit, row edit, and row move
instrument = function(context) {

context.find('.erpJS_input').each(function(index, value) {
$(this).change(function() {
erp_dataDirty = true;
});
context.find('.erpJS_input').change(function() {
erp_dataDirty = true;
});

// Action on edit row
context.find('.erpJS_editButton').each(function(index, value) {
$(this).click(function() {
// Send the event to the span
$(this).prev().triggerHandler("erp_edit");
});
// Action on edit row
context.find('div.erpJS_editButton').click(function() {
// Send the event to the span
$(this).prev().triggerHandler('erp_edit');
});

// Action on select row and + row. Check if the data is
// dirty, and if it is, prompt for save
context.find('.erpJS_willDiscard').each(function(index, value) {
$(this).click(function(event) {
if (erp_dataDirty) {
if (!confirm("This action will discard your changes.")) {
erp_dirtyVeto = true;
return false;
}
context.find('a.erpJS_willDiscard').click(function(event) {
if (erp_dataDirty) {
if (!confirm("This action will discard your changes.")) {
erp_dirtyVeto = true;
return false;
}
return true;
});
}
return true;
});

context.find('.erpJS_submit').each(function(index, value) {
if (!$.browser.msie || parseInt($.browser.version) >= 8)
// No button support in IE 7 and below
$(this).button();
$(this).click(function() {
var cont = true;
if (erp_dirtyVeto) {
erp_dirtyVeto = false;
if (!$.browser.msie || parseInt($.browser.version) >= 8)
// No button support in IE 7 and below
context.find('a.erpJS_submit').button();

context.find('a.erpJS_submit').click(function() {
var cont = true;
if (erp_dirtyVeto) {
erp_dirtyVeto = false;
cont = false;
} else {
var form = $(this).closest("form");
if (form && form.length > 0) {
form[0].erp_action.value = $(this).attr('href');
form.submit();
cont = false;
} else {
var form = $(this).closest("form");
if (form && form.length > 0) {
form[0].erp_action.value = $(this).attr('href');
form.submit();
cont = false;
}
}
return cont;
});
}
return cont;
});

context.find('.erpJS_sort').each(function(index, value) {
$(this).click(function() {
var m = /{(.*)}/.exec($(this).attr("class"));
var md = {};
if (m)
md = eval('({' + m[1] + '})');
return sortTable(this, false, md.headrows, md.footrows);
});
context.find('span.erpJS_sort').click(function() {
var m = /{(.*)}/.exec($(this).attr("class"));
var md = {};
if (m)
md = eval('({' + m[1] + '})');
return sortTable(this, false, md.headrows, md.footrows);
});

context.find('.erpJS_cell').each(function(index, value) {
context.find('span.erpJS_cell').each(function(index, value) {

// Make the containing row draggable
var tr = $(this).closest("tr");
tr.addClass('ui-draggable');

// Move meta-data stored in the class attribute into $.data
// Move meta-data stored in the class attribute into $.data
var p, m, c = $(this).attr("class");
if (m = /({.*})/.exec(c)) {
p = eval('(' + m[1] + ')');
Expand Down Expand Up @@ -474,9 +479,7 @@
$(this).editable(p.url, p);
});

context.find('tr.ui-draggable').each(function(index, value) {
makeRowDraggable($(value));
});
makeRowsDraggable(0, context.find('tr.ui-draggable'));
};

$(document).ready(function() {
Expand Down

0 comments on commit 6cc9cc9

Please sign in to comment.