Permalink
Browse files

Table: Remember hidden columns post-refresh

(cherry picked from commit 7d80cbd)

Closes gh-7334
Fixes gh-7275
  • Loading branch information...
gabrielschulhof committed Apr 22, 2014
1 parent b8431e1 commit 5048010b1402d7787f8e9f0d940046ac349972ea
@@ -83,14 +83,17 @@ $.widget( "mobile.table", $.mobile.table, {
// create the hide/show toggles
this.headers.not( "td" ).each( function() {
- var header = $( this ),
+ var input,
+ header = $( this ),
priority = $.mobile.getAttribute( this, "priority" ),
cells = header.add( header.jqmData( "cells" ) );
if ( priority ) {
cells.addClass( opts.classes.priorityPrefix + priority );
- ( keep ? inputs.eq( checkboxIndex++ ) :
+ // Make sure the (new?) checkbox is associated with its header via .jqmData() and
+ // that, vice versa, the header is also associated with the checkbox
+ input = ( keep ? inputs.eq( checkboxIndex++ ) :
$("<label><input type='checkbox' checked />" +
( header.children( "abbr" ).first().attr( "title" ) ||
header.text() ) +
@@ -100,7 +103,13 @@ $.widget( "mobile.table", $.mobile.table, {
.checkboxradio( {
theme: opts.columnPopupTheme
}) )
- .jqmData( "cells", cells );
+
+ // Associate the header with the checkbox
+ .jqmData( "header", header )
+ .jqmData( "cells", cells );
+
+ // Associate the checkbox with the header
+ header.jqmData( "input", input );
}
});
@@ -174,18 +183,48 @@ $.widget( "mobile.table", $.mobile.table, {
},
_refresh: function( create ) {
+ var headers, hiddenColumns, index;
+
+ // Calling _super() here updates this.headers
this._super( create );
if ( !create && this.options.mode === "columntoggle" ) {
+ headers = this.headers;
+ hiddenColumns = [];
+
+ // Find the index of the column header associated with each old checkbox among the
+ // post-refresh headers and, if the header is still there, make sure the corresponding
+ // column will be hidden if the pre-refresh checkbox indicates that the column is
+ // hidden by recording its index in the array of hidden columns.
+ this._menu.find( "input" ).each( function() {
+ var input = $( this ),
+ header = input.jqmData( "header" ),
+ index = headers.index( header[ 0 ] );
+
+ if ( index > -1 && !input.prop( "checked" ) ) {
+
+ // The column header associated with /this/ checkbox is still present in the
+ // post-refresh table and the checkbox is not checked, so the column associated
+ // with this column header is currently hidden. Let's record that.
+ hiddenColumns.push( index );
+ }
+ });
+
// columns not being replaced must be cleared from input toggle-locks
this._unlockCells( this.element.find( ".ui-table-cell-hidden, " +
".ui-table-cell-visible" ) );
// update columntoggles and cells
this._addToggles( this._menu, create );
- // check/uncheck
- this._setToggleState();
+ // At this point all columns are visible, so uncheck the checkboxes that correspond to
+ // those columns we've found to be hidden
+ for ( index = hiddenColumns.length - 1 ; index > -1 ; index-- ) {
+ headers.eq( hiddenColumns[ index ] ).jqmData( "input" )
+ .prop( "checked", false )
+ .checkboxradio( "refresh" )
+ .trigger( "change" );
+ }
}
},
@@ -33,7 +33,34 @@
<div id="qunit"></div>
<div data-nstest-role="page">
<div class="ui-content" role="main">
- <table id="refresh-column-count-test" data-nstest-role="table" id="table-column-toggle" data-nstest-mode="columntoggle" class="ui-responsive table-stroke">
+ <table id="refresh-column-count-test" data-nstest-role="table" data-nstest-mode="columntoggle" class="ui-responsive table-stroke">
+ <thead>
+ <tr>
+ <th data-nstest-priority="2">Rank</th>
+ <th>Movie Title</th>
+ <th data-nstest-priority="3">Year</th>
+ <th data-nstest-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
+ <th data-nstest-priority="5">Reviews</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>1</th>
+ <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-nstest-rel="external">Citizen Kane</a></td>
+ <td>1941</td>
+ <td>100%</td>
+ <td>74</td>
+ </tr>
+ <tr>
+ <th>2</th>
+ <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-nstest-rel="external">Casablanca</a></td>
+ <td>1942</td>
+ <td>97%</td>
+ <td>64</td>
+ </tr>
+ </tbody>
+ </table>
+ <table id="refresh-hidden-column-test" data-nstest-role="table" data-nstest-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-nstest-priority="2">Rank</th>
@@ -1,17 +1,48 @@
module( "Table integration tests" );
test( "Table refresh does not drop columns", function() {
- var eventNs = ".tableRefreshDoesNotDropColumns",
- table = $( "#refresh-column-count-test" ),
+ var table = $( "#refresh-column-count-test" ),
checkbox = $( "#refresh-column-count-test-popup" )
.find( "input" ).eq( 2 );
- expect( 1 );
-
checkbox.prop( "checked", false ).trigger( "change" );
table.table( "refresh" );
deepEqual( $( "thead tr > *:visible", table[ 0 ] ).length,
$( "tbody tr:first > *:visible", table[ 0 ] ).length,
"Number of visible headers columns equals number of visible " +
"data columns" );
});
+
+test( "Hidden columns stay hidden after row/column addition", function() {
+ var table = $( "#refresh-hidden-column-test" );
+
+ // Hide a column
+ $( "#refresh-hidden-column-test-popup" ).find( "input" ).eq( 2 )
+ .prop( "checked", false )
+ .checkboxradio( "refresh" )
+ .trigger( "change" );
+
+ // Add a row
+ table.children( "tbody" ).append( "<tr>" +
+ "<th>11</th>" +
+ "<td class='title'><a href='http://en.wikipedia.org/wiki/Day_of_the_triffids' " +
+ "data-rel='external'>Day of the triffids</a></td>" +
+ "<td>1963</td>" +
+ "<td>78%</td>" +
+ "<td>18</td>" +
+ "</tr>" );
+ table.table( "refresh" );
+
+ deepEqual( $( "#refresh-hidden-column-test-popup" ).find( "input" ).eq( 2 ).prop( "checked" ),
+ false, "Checkbox remains unchecked after row addition and table refresh" );
+
+ // Add a column
+ table.find( "thead tr th:nth(2)" ).before( "<th data-nstest-priority='4'>Test</th>" );
+ table.find( "tbody tr th:nth(2)" ).each( function() {
+ $( this ).before( "<td>Test</td>" );
+ });
+ table.table( "refresh" );
+
+ deepEqual( $( "#refresh-hidden-column-test-popup" ).find( "input" ).eq( 3 ).prop( "checked" ),
+ false, "Checkbox remains unchecked after row addition and table refresh" );
+});

0 comments on commit 5048010

Please sign in to comment.