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

Commit

Permalink
Table: Remember hidden columns post-refresh
Browse files Browse the repository at this point in the history 
(cherry picked from commit 7d80cbd)

Closes gh-7334
Fixes gh-7275
  • Loading branch information
Gabriel Schulhof committed Apr 24, 2014
1 parent b8431e1 commit 5048010
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 10 deletions.
49 changes: 44 additions & 5 deletions js/widgets/table.columntoggle.js
View file
Expand Up @@ -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() ) +
Expand All @@ -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 );
}
});

Expand Down Expand Up @@ -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" );
}
}
},

Expand Down
29 changes: 28 additions & 1 deletion tests/unit/table/columntoggle-refresh-tests.html
View file
Expand Up @@ -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>
Expand Down
39 changes: 35 additions & 4 deletions tests/unit/table/columntoggle_refresh_core.js
View file
@@ -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.