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

Commit 7d80cbd

Browse files
author
Gabriel Schulhof
committed
Table: Remember hidden columns post-refresh
Closes gh-7334 Fixes gh-7275
1 parent 186d286 commit 7d80cbd

File tree

3 files changed

+107
-10
lines changed

3 files changed

+107
-10
lines changed

‎js/widgets/table.columntoggle.js

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,17 @@ $.widget( "mobile.table", $.mobile.table, {
8383

8484
// create the hide/show toggles
8585
this.headers.not( "td" ).each( function() {
86-
var header = $( this ),
86+
var input,
87+
header = $( this ),
8788
priority = $.mobile.getAttribute( this, "priority" ),
8889
cells = header.add( header.jqmData( "cells" ) );
8990

9091
if ( priority ) {
9192
cells.addClass( opts.classes.priorityPrefix + priority );
9293

93-
( keep ? inputs.eq( checkboxIndex++ ) :
94+
// Make sure the (new?) checkbox is associated with its header via .jqmData() and
95+
// that, vice versa, the header is also associated with the checkbox
96+
input = ( keep ? inputs.eq( checkboxIndex++ ) :
9497
$("<label><input type='checkbox' checked />" +
9598
( header.children( "abbr" ).first().attr( "title" ) ||
9699
header.text() ) +
@@ -100,7 +103,13 @@ $.widget( "mobile.table", $.mobile.table, {
100103
.checkboxradio( {
101104
theme: opts.columnPopupTheme
102105
}) )
103-
.jqmData( "cells", cells );
106+
107+
// Associate the header with the checkbox
108+
.jqmData( "header", header )
109+
.jqmData( "cells", cells );
110+
111+
// Associate the checkbox with the header
112+
header.jqmData( "input", input );
104113
}
105114
});
106115

@@ -174,18 +183,48 @@ $.widget( "mobile.table", $.mobile.table, {
174183
},
175184

176185
_refresh: function( create ) {
186+
var headers, hiddenColumns, index;
187+
188+
// Calling _super() here updates this.headers
177189
this._super( create );
178190

179191
if ( !create && this.options.mode === "columntoggle" ) {
192+
headers = this.headers;
193+
hiddenColumns = [];
194+
195+
// Find the index of the column header associated with each old checkbox among the
196+
// post-refresh headers and, if the header is still there, make sure the corresponding
197+
// column will be hidden if the pre-refresh checkbox indicates that the column is
198+
// hidden by recording its index in the array of hidden columns.
199+
this._menu.find( "input" ).each( function() {
200+
var input = $( this ),
201+
header = input.jqmData( "header" ),
202+
index = headers.index( header[ 0 ] );
203+
204+
if ( index > -1 && !input.prop( "checked" ) ) {
205+
206+
// The column header associated with /this/ checkbox is still present in the
207+
// post-refresh table and the checkbox is not checked, so the column associated
208+
// with this column header is currently hidden. Let's record that.
209+
hiddenColumns.push( index );
210+
}
211+
});
212+
180213
// columns not being replaced must be cleared from input toggle-locks
181214
this._unlockCells( this.element.find( ".ui-table-cell-hidden, " +
182215
".ui-table-cell-visible" ) );
183216

184217
// update columntoggles and cells
185218
this._addToggles( this._menu, create );
186219

187-
// check/uncheck
188-
this._setToggleState();
220+
// At this point all columns are visible, so uncheck the checkboxes that correspond to
221+
// those columns we've found to be hidden
222+
for ( index = hiddenColumns.length - 1 ; index > -1 ; index-- ) {
223+
headers.eq( hiddenColumns[ index ] ).jqmData( "input" )
224+
.prop( "checked", false )
225+
.checkboxradio( "refresh" )
226+
.trigger( "change" );
227+
}
189228
}
190229
},
191230

‎tests/unit/table/columntoggle-refresh-tests.html

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,34 @@
3333
<div id="qunit"></div>
3434
<div data-nstest-role="page">
3535
<div class="ui-content" role="main">
36-
<table id="refresh-column-count-test" data-nstest-role="table" id="table-column-toggle" data-nstest-mode="columntoggle" class="ui-responsive table-stroke">
36+
<table id="refresh-column-count-test" data-nstest-role="table" data-nstest-mode="columntoggle" class="ui-responsive table-stroke">
37+
<thead>
38+
<tr>
39+
<th data-nstest-priority="2">Rank</th>
40+
<th>Movie Title</th>
41+
<th data-nstest-priority="3">Year</th>
42+
<th data-nstest-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
43+
<th data-nstest-priority="5">Reviews</th>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
<tr>
48+
<th>1</th>
49+
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-nstest-rel="external">Citizen Kane</a></td>
50+
<td>1941</td>
51+
<td>100%</td>
52+
<td>74</td>
53+
</tr>
54+
<tr>
55+
<th>2</th>
56+
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-nstest-rel="external">Casablanca</a></td>
57+
<td>1942</td>
58+
<td>97%</td>
59+
<td>64</td>
60+
</tr>
61+
</tbody>
62+
</table>
63+
<table id="refresh-hidden-column-test" data-nstest-role="table" data-nstest-mode="columntoggle" class="ui-responsive table-stroke">
3764
<thead>
3865
<tr>
3966
<th data-nstest-priority="2">Rank</th>

‎tests/unit/table/columntoggle_refresh_core.js

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,48 @@
11
module( "Table integration tests" );
22

33
test( "Table refresh does not drop columns", function() {
4-
var eventNs = ".tableRefreshDoesNotDropColumns",
5-
table = $( "#refresh-column-count-test" ),
4+
var table = $( "#refresh-column-count-test" ),
65
checkbox = $( "#refresh-column-count-test-popup" )
76
.find( "input" ).eq( 2 );
87

9-
expect( 1 );
10-
118
checkbox.prop( "checked", false ).trigger( "change" );
129
table.table( "refresh" );
1310
deepEqual( $( "thead tr > *:visible", table[ 0 ] ).length,
1411
$( "tbody tr:first > *:visible", table[ 0 ] ).length,
1512
"Number of visible headers columns equals number of visible " +
1613
"data columns" );
1714
});
15+
16+
test( "Hidden columns stay hidden after row/column addition", function() {
17+
var table = $( "#refresh-hidden-column-test" );
18+
19+
// Hide a column
20+
$( "#refresh-hidden-column-test-popup" ).find( "input" ).eq( 2 )
21+
.prop( "checked", false )
22+
.checkboxradio( "refresh" )
23+
.trigger( "change" );
24+
25+
// Add a row
26+
table.children( "tbody" ).append( "<tr>" +
27+
"<th>11</th>" +
28+
"<td class='title'><a href='http://en.wikipedia.org/wiki/Day_of_the_triffids' " +
29+
"data-rel='external'>Day of the triffids</a></td>" +
30+
"<td>1963</td>" +
31+
"<td>78%</td>" +
32+
"<td>18</td>" +
33+
"</tr>" );
34+
table.table( "refresh" );
35+
36+
deepEqual( $( "#refresh-hidden-column-test-popup" ).find( "input" ).eq( 2 ).prop( "checked" ),
37+
false, "Checkbox remains unchecked after row addition and table refresh" );
38+
39+
// Add a column
40+
table.find( "thead tr th:nth(2)" ).before( "<th data-nstest-priority='4'>Test</th>" );
41+
table.find( "tbody tr th:nth(2)" ).each( function() {
42+
$( this ).before( "<td>Test</td>" );
43+
});
44+
table.table( "refresh" );
45+
46+
deepEqual( $( "#refresh-hidden-column-test-popup" ).find( "input" ).eq( 3 ).prop( "checked" ),
47+
false, "Checkbox remains unchecked after row addition and table refresh" );
48+
});

0 commit comments

Comments
 (0)