From 25ae3e2387ca8936434d427fb5eb1f2d0a4f6d13 Mon Sep 17 00:00:00 2001 From: Aris Feryanto Date: Tue, 31 May 2011 09:23:37 +0700 Subject: [PATCH 1/4] Add checking to first column (actions) span for resizing column --- js/makegrid.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/js/makegrid.js b/js/makegrid.js index c452ea8dfc..1bceffd25c 100644 --- a/js/makegrid.js +++ b/js/makegrid.js @@ -5,6 +5,9 @@ // constant minColWidth: 5, + // changeable vars + firstColSpan: 5, // default to 5, changed later + // functions dragStartRsz: function(e, obj) { var n = $('div', this.cRsz).index(obj); @@ -34,7 +37,7 @@ } var n = this.colRsz.n; $('tr', this.t).each(function() { - $('th:eq(' + (1 + n) + ') div, td:eq(' + (5 + n) + ') div', this).each(function() { + $('th:eq(' + (1 + n) + ') div, td:eq(' + (g.firstColSpan + n) + ') div', this).each(function() { $(this).css('width', nw + 'px'); }); }); @@ -56,6 +59,9 @@ g.cRsz = document.createElement('div'); // column resizer g.t = t; + // assign the first column (actions) span + g.firstColSpan = parseInt($('thead tr:first th:first').attr('colspan')); + // create column borders $(t).find('thead tr:first th:gt(0)').each(function() { $this = $(this); From 566851d210104cb44ec536dc195b05707e0496c8 Mon Sep 17 00:00:00 2001 From: Aris Feryanto Date: Tue, 31 May 2011 09:46:25 +0700 Subject: [PATCH 2/4] Add trigger to remake the resizable column when an ajax request is done --- js/sql.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/js/sql.js b/js/sql.js index 5e2f376cfb..319f1c662f 100644 --- a/js/sql.js +++ b/js/sql.js @@ -211,6 +211,15 @@ $(document).ready(function() { $("#sqlqueryresults").live('appendAnchor',function() { appendInlineAnchor(); }) + + /** + * Attach the {@link makegrid} function to a custom event, which will be + * triggered manually everytime the table of results is reloaded + * @memberOf jQuery + */ + $("#sqlqueryresults").live('remakeGrid', function() { + $('#table_results').makegrid(); + }) /** * Trigger the appendAnchor event to prepare the first table for inline edit @@ -324,6 +333,7 @@ $(document).ready(function() { $('#sqlqueryresults').show(); $("#sqlqueryresults").html(data); $("#sqlqueryresults").trigger('appendAnchor'); + $("#sqlqueryresults").trigger('remakeGrid'); $('#togglequerybox').show(); if($("#togglequerybox").siblings(":visible").length > 0) { $("#togglequerybox").trigger('click'); @@ -364,6 +374,7 @@ $(document).ready(function() { $.post($the_form.attr('action'), $the_form.serialize(), function(data) { $("#sqlqueryresults").html(data); $("#sqlqueryresults").trigger('appendAnchor'); + $("#sqlqueryresults").trigger('remakeGrid'); PMA_init_slider(); PMA_ajaxRemoveMessage($msgbox); @@ -387,6 +398,7 @@ $(document).ready(function() { $.post($the_form.attr('action'), $the_form.serialize() + '&ajax_request=true', function(data) { $("#sqlqueryresults").html(data); $("#sqlqueryresults").trigger('appendAnchor'); + $("#sqlqueryresults").trigger('remakeGrid'); PMA_init_slider(); PMA_ajaxRemoveMessage($msgbox); }) // end $.post() @@ -412,7 +424,8 @@ $(document).ready(function() { $.get($anchor.attr('href'), $anchor.serialize() + '&ajax_request=true', function(data) { $("#sqlqueryresults") .html(data) - .trigger('appendAnchor'); + .trigger('appendAnchor') + .trigger('remakeGrid'); PMA_ajaxRemoveMessage($msgbox); }) // end $.get() })//end Sort results table @@ -431,7 +444,8 @@ $(document).ready(function() { $.post($form.attr('action'), $form.serialize() + '&ajax_request=true' , function(data) { $("#sqlqueryresults") .html(data) - .trigger('appendAnchor'); + .trigger('appendAnchor') + .trigger('remakeGrid'); PMA_init_slider(); }) // end $.post() }) @@ -1146,7 +1160,7 @@ $(document).ready(function() { /** * create resizable table */ - $('#table_results').makegrid(); + $("#sqlqueryresults").trigger('remakeGrid'); }) /**#@- */ From f4b47d4cf0a846f394570673429a9759eb5f4991 Mon Sep 17 00:00:00 2001 From: Aris Feryanto Date: Tue, 31 May 2011 10:50:56 +0700 Subject: [PATCH 3/4] Support column resizing for vertical display mode --- js/makegrid.js | 12 +++++++----- themes/pmahomme/css/theme_right.css.php | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/js/makegrid.js b/js/makegrid.js index 1bceffd25c..d031f9adaf 100644 --- a/js/makegrid.js +++ b/js/makegrid.js @@ -6,7 +6,7 @@ minColWidth: 5, // changeable vars - firstColSpan: 5, // default to 5, changed later + firstColSpan: 5, // default to 5, only useful in horizontal mode // functions dragStartRsz: function(e, obj) { @@ -16,7 +16,8 @@ n: n, obj: obj, objLeft: parseInt(obj.style.left), - objWidth: $('th div:eq(' + (1 + n) + ')', this.t).width() + objWidth: $('tr:first th:eq(' + (1 + n) + ') div,' + + 'tr:first td:eq(' + (n) + ') div', this.t).width() }; $('body').css('cursor', 'col-resize'); $('body').noSelect(); @@ -47,7 +48,7 @@ } }, reposRsz: function() { - $(this.t).find('thead tr:first th:gt(0)').each(function() { + $(this.t).find('tr:first th:gt(0), tr:first td').each(function() { $this = $(this); var n = $this.index(); $cb = $('div:eq(' + (n - 1) + ')', g.cRsz); // column border @@ -60,10 +61,11 @@ g.t = t; // assign the first column (actions) span - g.firstColSpan = parseInt($('thead tr:first th:first').attr('colspan')); + g.firstColSpan = $('tr:first th:first', t).attr('colspan'); + g.firstColSpan = (g.firstColSpan != undefined) ? parseInt(g.firstColSpan) : 0; // posibility of vertical display mode // create column borders - $(t).find('thead tr:first th:gt(0)').each(function() { + $(t).find('tr:first th:gt(0), tr:first td').each(function() { $this = $(this); var cb = document.createElement('div'); // column border cb.style.left = $this.position().left + $this.width() + 'px'; diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php index e53bdfb02d..c11cd0a806 100644 --- a/themes/pmahomme/css/theme_right.css.php +++ b/themes/pmahomme/css/theme_right.css.php @@ -2129,7 +2129,7 @@ fieldset .disabled-field td { .colborder { border-right: solid 1px #FFFFFF; cursor: col-resize; - margin-left: -1px; + margin-left: -2px; position: absolute; width: 3px; } From 6b69e631d72bf08eb32e36c52d99d87db6cf4912 Mon Sep 17 00:00:00 2001 From: Aris Feryanto Date: Tue, 31 May 2011 11:54:04 +0700 Subject: [PATCH 4/4] Column resize: fix compatibility with inline edit --- js/makegrid.js | 26 +++++++++--- js/sql.js | 55 +++++++++++++++++-------- themes/pmahomme/css/theme_right.css.php | 4 +- 3 files changed, 60 insertions(+), 25 deletions(-) diff --git a/js/makegrid.js b/js/makegrid.js index d031f9adaf..388c513ee4 100644 --- a/js/makegrid.js +++ b/js/makegrid.js @@ -16,8 +16,8 @@ n: n, obj: obj, objLeft: parseInt(obj.style.left), - objWidth: $('tr:first th:eq(' + (1 + n) + ') div,' + - 'tr:first td:eq(' + (n) + ') div', this.t).width() + objWidth: $('tr:first th:eq(' + (1 + n) + ') span,' + + 'tr:first td:eq(' + n + ') span', this.t).width() }; $('body').css('cursor', 'col-resize'); $('body').noSelect(); @@ -38,7 +38,7 @@ } var n = this.colRsz.n; $('tr', this.t).each(function() { - $('th:eq(' + (1 + n) + ') div, td:eq(' + (g.firstColSpan + n) + ') div', this).each(function() { + $('th:eq(' + (1 + n) + ') span, td:eq(' + (g.firstColSpan + n) + ') span', this).each(function() { $(this).css('width', nw + 'px'); }); }); @@ -58,6 +58,8 @@ } g.gDiv = document.createElement('div'); // create global div g.cRsz = document.createElement('div'); // column resizer + // chain table and grid together + t.grid = g; g.t = t; // assign the first column (actions) span @@ -77,9 +79,9 @@ $(g.cRsz).append(cb); }); - // wrap all cells with div - $(t).find('th, td').each(function() { - $(this).wrapInner('
'); + // wrap all cells, except actions cell, with div + $(t).find('th, td:not(:has(span))').each(function() { + $(this).wrapInner(''); }); // register events @@ -124,6 +126,18 @@ } }); }; + $.fn.refreshgrid = function() { + return this.each(function() { + if (!docready) { + var t = this; + $(document).ready(function() { + if (t.grid) t.grid.reposRsz(); + }); + } else { + if (this.grid) this.grid.reposRsz(); + } + }); + } $.fn.noSelect = function (p) { //no select plugin by Paulo P.Marinas var prevent = (p == null) ? true : p; if (prevent) { diff --git a/js/sql.js b/js/sql.js index 319f1c662f..f8ab0bbe22 100644 --- a/js/sql.js +++ b/js/sql.js @@ -217,9 +217,18 @@ $(document).ready(function() { * triggered manually everytime the table of results is reloaded * @memberOf jQuery */ - $("#sqlqueryresults").live('remakeGrid', function() { + $("#sqlqueryresults").live('makegrid', function() { $('#table_results').makegrid(); }) + + /** + * Attach the {@link refreshgrid} function to a custom event, which will be + * triggered manually everytime the table of results is manipulated (e.g., by inline edit) + * @memberOf jQuery + */ + $("#sqlqueryresults").live('refreshgrid', function() { + $('#table_results').refreshgrid(); + }) /** * Trigger the appendAnchor event to prepare the first table for inline edit @@ -333,7 +342,7 @@ $(document).ready(function() { $('#sqlqueryresults').show(); $("#sqlqueryresults").html(data); $("#sqlqueryresults").trigger('appendAnchor'); - $("#sqlqueryresults").trigger('remakeGrid'); + $("#sqlqueryresults").trigger('makegrid'); $('#togglequerybox').show(); if($("#togglequerybox").siblings(":visible").length > 0) { $("#togglequerybox").trigger('click'); @@ -374,7 +383,7 @@ $(document).ready(function() { $.post($the_form.attr('action'), $the_form.serialize(), function(data) { $("#sqlqueryresults").html(data); $("#sqlqueryresults").trigger('appendAnchor'); - $("#sqlqueryresults").trigger('remakeGrid'); + $("#sqlqueryresults").trigger('makegrid'); PMA_init_slider(); PMA_ajaxRemoveMessage($msgbox); @@ -398,7 +407,7 @@ $(document).ready(function() { $.post($the_form.attr('action'), $the_form.serialize() + '&ajax_request=true', function(data) { $("#sqlqueryresults").html(data); $("#sqlqueryresults").trigger('appendAnchor'); - $("#sqlqueryresults").trigger('remakeGrid'); + $("#sqlqueryresults").trigger('makegrid'); PMA_init_slider(); PMA_ajaxRemoveMessage($msgbox); }) // end $.post() @@ -425,7 +434,7 @@ $(document).ready(function() { $("#sqlqueryresults") .html(data) .trigger('appendAnchor') - .trigger('remakeGrid'); + .trigger('makegrid'); PMA_ajaxRemoveMessage($msgbox); }) // end $.get() })//end Sort results table @@ -445,7 +454,7 @@ $(document).ready(function() { $("#sqlqueryresults") .html(data) .trigger('appendAnchor') - .trigger('remakeGrid'); + .trigger('makegrid'); PMA_init_slider(); }) // end $.post() }) @@ -537,15 +546,19 @@ $(document).ready(function() { if($this_hide.siblings("td:eq(" + i + ")").hasClass("inline_edit") == false) { continue; } - txt = $this_hide.siblings("td:eq(" + i + ")").data('original_data'); - if($this_hide.siblings("td:eq(" + i + ")").children().length != 0) { - $this_hide.siblings("td:eq(" + i + ")").empty(); - $this_hide.siblings("td:eq(" + i + ")").append(txt); + var $this_hide_siblings = $this_hide.siblings("td:eq(" + i + ")").children('span'); + txt = $this_hide_siblings.data('original_data'); + if($this_hide_siblings.children().length != 0) { + $this_hide_siblings.empty(); + $this_hide_siblings.append(txt); } } $(this).prev().prev().remove(); $(this).prev().remove(); $(this).remove(); + + // refresh the grid + $("#sqlqueryresults").trigger('refreshgrid'); }); } else { var txt = ''; @@ -570,13 +583,17 @@ $(document).ready(function() { if( $this_row.siblings("tr:eq(" + i + ") td:eq(" + pos + ")").hasClass("inline_edit") == false) { continue; } - txt = $this_row.siblings("tr:eq(" + i + ") td:eq(" + pos + ")").data('original_data'); - $this_row.siblings("tr:eq(" + i + ") td:eq(" + pos + ")").empty(); - $this_row.siblings("tr:eq(" + i + ") td:eq(" + pos + ")").append(txt); + $this_row_siblings = $this_row.siblings("tr:eq(" + i + ") td:eq(" + pos + ")").children('span'); + txt = $this_row_siblings.data('original_data'); + $this_row_siblings.empty(); + $this_row_siblings.append(txt); } $(this).prev().remove(); $(this).prev().remove(); $(this).remove(); + + // refresh the grid + $("#sqlqueryresults").trigger('refreshgrid'); }); } @@ -608,7 +625,7 @@ $(document).ready(function() { /** * @var data_value Current value of this field */ - var data_value = $(this).html(); + var data_value = $(this).children('span').html(); // We need to retrieve the value from the server for truncated/relation fields // Find the field name @@ -616,7 +633,7 @@ $(document).ready(function() { /** * @var this_field Object referring to this field () */ - var $this_field = $(this); + var $this_field = $(this).children('span'); /** * @var field_name String containing the name of this field. * @see getFieldName() @@ -793,7 +810,11 @@ $(document).ready(function() { $this_field.append(''); $this_field.data('original_data', 'NULL'); } - }) + }); + + // refresh the grid + $("#sqlqueryresults").trigger('refreshgrid'); + }) // End On click, replace the current field with an input/textarea /** @@ -1160,7 +1181,7 @@ $(document).ready(function() { /** * create resizable table */ - $("#sqlqueryresults").trigger('remakeGrid'); + $("#sqlqueryresults").trigger('makegrid'); }) /**#@- */ diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php index c11cd0a806..1f1002623b 100644 --- a/themes/pmahomme/css/theme_right.css.php +++ b/themes/pmahomme/css/theme_right.css.php @@ -2127,14 +2127,14 @@ fieldset .disabled-field td { } .colborder { - border-right: solid 1px #FFFFFF; + border-right: solid 2px #FFFFFF; cursor: col-resize; margin-left: -2px; position: absolute; width: 3px; } -.pma_table thead th div, .pma_table tbody td div { +.pma_table thead th span, .pma_table tbody td span { display: block; overflow: hidden; }