Permalink
Browse files

Merge pull request #5854 from jquery/table-refresh-1.3

Table refresh method for 1.3.x. Fixes #5841 and fixes #5842.
  • Loading branch information...
2 parents 2f8cee0 + 4f081ec commit 922c562b5c65f0c689fd216bc2890ffd64d65263 @jaspermdegroot jaspermdegroot committed Apr 4, 2013
Showing with 190 additions and 54 deletions.
  1. +59 −36 js/widgets/table.columntoggle.js
  2. +14 −2 js/widgets/table.js
  3. +6 −3 js/widgets/table.reflow.js
  4. +22 −10 tests/unit/table/index.html
  5. +89 −3 tests/unit/table/table_core.js
@@ -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" ) );
@@ -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();
});
View
@@ -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
@@ -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 );
@@ -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 ) );
@@ -61,6 +69,10 @@ $.widget( "mobile.table", $.mobile.widget, {
});
+ // update table modes
+ if ( create === undefined ) {
+ this.element.trigger( 'refresh' );
+ }
}
});
@@ -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;
@@ -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",
@@ -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>
@@ -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>
@@ -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>
Oops, something went wrong.

1 comment on commit 922c562

frigon commented on 922c562 Jul 17, 2013

The refresh method does not update dynamically added columns.

Please sign in to comment.