Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Merge pull request #5854 from jquery/table-refresh-1.3
Browse files Browse the repository at this point in the history 
Table refresh method for 1.3.x. Fixes #5841 and fixes #5842.
  • Loading branch information
@jaspermdegroot
jaspermdegroot committed Apr 4, 2013
2 parents 2f8cee0 + 4f081ec commit 922c562
Show file tree
Hide file tree
Showing 5 changed files with 190 additions and 54 deletions.
95 changes: 59 additions & 36 deletions js/widgets/table.columntoggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,26 +34,29 @@ $.mobile.table.prototype.options.classes = $.extend(
}
);

$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function() {

$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate refresh", function( e ) {
var $table = $( this ),
self = $table.data( "mobile-table" ),
event = e.type,
o = self.options,
ns = $.mobile.ns;
ns = $.mobile.ns,
id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup"; //TODO BETTER FALLBACK ID HERE

if( o.mode !== "columntoggle" ){
return;
}

self.element.addClass( o.classes.columnToggleTable );
if ( event !== "refresh" ) {
self.element.addClass( o.classes.columnToggleTable );

var id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup", //TODO BETTER FALLBACK ID HERE
$menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" ),
$popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>"),
$menu = $("<fieldset data-" + ns + "role='controlgroup'></fieldset>");
var $menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" ),
$popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>"),
$menu = $("<fieldset data-" + ns + "role='controlgroup'></fieldset>");
}

// create the hide/show toggles
self.headers.not( "td" ).each(function(){
self.headers.not( "td" ).each(function( i ){

var priority = $( this ).jqmData( "priority" ),
$cells = $( this ).add( $( this ).jqmData( "cells" ) );
Expand All @@ -62,48 +65,68 @@ $.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function()

$cells.addClass( o.classes.priorityPrefix + priority );

$("<label><input type='checkbox' checked />" + $( this ).text() + "</label>" )
.appendTo( $menu )
.children( 0 )
.jqmData( "cells", $cells )
.checkboxradio({
theme: o.columnPopupTheme
});
if ( event !== "refresh" ) {
$("<label><input type='checkbox' checked />" + $( this ).text() + "</label>" )
.appendTo( $menu )
.children( 0 )
.jqmData( "cells", $cells )
.checkboxradio({
theme: o.columnPopupTheme
});
} else {
$('#' + id + ' fieldset div:eq(' + i +')').find('input').jqmData("cells", $cells)
}
}
});
if ( event !== "refresh" ) {
$menu.appendTo( $popup );
}

// bind change event listeners to inputs - TODO: move to a private method?
$menu.on( "change", "input", function( e ){
if( this.checked ){
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-hidden" ).addClass( "ui-table-cell-visible" );
}
else {
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-visible" ).addClass( "ui-table-cell-hidden" );
}
});
if ( $menu === undefined ) {
$switchboard = $('#' + id + ' fieldset');
} else {
$switchboard = $menu;
}

$menuButton
.insertBefore( $table )
.buttonMarkup({
theme: o.columnBtnTheme
if (event !== "refresh") {
$switchboard.on( "change", "input", function( e ){
if( this.checked ){
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-hidden" ).addClass( "ui-table-cell-visible" );
} else {
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-visible" ).addClass( "ui-table-cell-hidden" );
}
});

$popup
.insertBefore( $table )
.popup();
$menuButton
.insertBefore( $table )
.buttonMarkup({
theme: o.columnBtnTheme
});

$popup
.insertBefore( $table )
.popup();
}

// refresh method
self.refresh = function(){
$menu.find( "input" ).each( function(){
this.checked = $( this ).jqmData( "cells" ).eq(0).css( "display" ) === "table-cell";
self.update = function(){
$switchboard.find( "input" ).each( function(){
if (this.checked) {
this.checked = $( this ).jqmData( "cells" ).eq(0).css( "display" ) === "table-cell";
if (event === "refresh") {
$( this ).jqmData( "cells" ).addClass('ui-table-cell-visible');
}
} else {
$( this ).jqmData( "cells" ).addClass('ui-table-cell-hidden');
}
$( this ).checkboxradio( "refresh" );
});
};

$.mobile.window.on( "throttledresize", self.refresh );
$.mobile.window.on( "throttledresize", self.update );

self.refresh();
self.update();

});

Expand Down
16 changes: 14 additions & 2 deletions js/widgets/table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,17 @@ $.widget( "mobile.table", $.mobile.widget, {
},

_create: function() {
var self = this;
self.refresh( true );
},

refresh: function (create) {
var self = this,
trs = this.element.find( "thead tr" );

this.element.addClass( this.options.classes.table );
if ( create ) {
this.element.addClass( this.options.classes.table );
}

// Expose headers and allHeaders properties on the widget
// headers references the THs within the first TR in the table
Expand All @@ -40,7 +46,6 @@ $.widget( "mobile.table", $.mobile.widget, {

var span = parseInt( $( this ).attr( "colspan" ), 10 ),
sel = ":nth-child(" + ( coltally + 1 ) + ")";

$( this )
.jqmData( "colstart", coltally + 1 );

Expand All @@ -51,6 +56,9 @@ $.widget( "mobile.table", $.mobile.widget, {
}
}

if ( create === undefined ) {
$(this).jqmData("cells", "");
}
// Store "cells" data on header as a reference to all cells in the same column as this TH
$( this )
.jqmData( "cells", self.element.find( "tr" ).not( trs.eq(0) ).not( this ).children( sel ) );
Expand All @@ -61,6 +69,10 @@ $.widget( "mobile.table", $.mobile.widget, {

});

// update table modes
if ( create === undefined ) {
this.element.trigger( 'refresh' );
}
}

});
Expand Down
9 changes: 6 additions & 3 deletions js/widgets/table.reflow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@ $.mobile.table.prototype.options.classes = $.extend(
}
);

$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function() {
$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate refresh", function( e ) {

var $table = $( this ),
event = e.type,
self = $table.data( "mobile-table" ),
o = self.options;

Expand All @@ -30,13 +31,15 @@ $.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function()
return;
}

self.element.addClass( o.classes.reflowTable );
if ( event !== "refresh" ) {
self.element.addClass( o.classes.reflowTable );
}

// get headers in reverse order so that top-level headers are appended last
var reverseHeaders = $( self.allHeaders.get().reverse() );

// create the hide/show toggles
reverseHeaders.each(function(i){
reverseHeaders.each(function( i ){
var $cells = $( this ).jqmData( "cells" ),
colstart = $( this ).jqmData( "colstart" ),
hierarchyClass = $cells.not( this ).filter( "thead th" ).length && " ui-table-cell-label-top",
Expand Down
32 changes: 22 additions & 10 deletions tests/unit/table/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@
<link rel="stylesheet" href="../../../external/qunit.css"/>

<script src="../swarminject.js"></script>

<script type="text/javascript">
$(window).on('refresh_test_table', function (e, data) {
var tb = $(data).find('tbody'),
newRow = '<tr><th data-test="abc">1</th><td>2</td><td>3</td><td data-col="3">4</td><td>5</td></tr>';
tb.empty()
.append(newRow)
.closest('table')
.table('refresh');
});
</script>

</head>
<body>

Expand All @@ -51,11 +63,11 @@ <h1>Basic Table</h1>
<table data-nstest-role="table" id="movie-table">
<thead>
<tr>
<th data-priority="1">Rank</th>
<th data-priority="persist">Movie Title</th>
<th data-priority="2">Year</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="4">Reviews</th>
<th data-nstest-priority="1">Rank</th>
<th data-nstest-priority="persist">Movie Title</th>
<th data-nstest-priority="2">Year</th>
<th data-nstest-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-nstest-priority="4">Reviews</th>
</tr>
</thead>
<tbody>
Expand All @@ -78,11 +90,11 @@ <h1>Basic Table</h1>
<table data-nstest-role="table" data-nstest-mode="reflow" id="movie-table-reflow">
<thead>
<tr>
<th data-priority="1">Rank</th>
<th data-priority="persist">Movie Title</th>
<th data-priority="2">Year</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="4">Reviews</th>
<th data-nstest-priority="1">Rank</th>
<th data-nstest-priority="persist">Movie Title</th>
<th data-nstest-priority="2">Year</th>
<th data-nstest-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-nstest-priority="4">Reviews</th>
</tr>
</thead>
<tbody>
Expand Down
Loading

1 comment on commit 922c562

@frigon
Copy link

@frigon frigon commented on 922c562 Jul 17, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The refresh method does not update dynamically added columns.

Please sign in to comment.