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

Commit 922c562

Browse files
jaspermdegrootjaspermdegroot
committed
Merge pull request #5854 from jquery/table-refresh-1.3
Table refresh method for 1.3.x. Fixes #5841 and fixes #5842.
2 parents 2f8cee0 + 4f081ec commit 922c562

File tree

5 files changed

+190
-54
lines changed

5 files changed

+190
-54
lines changed

‎js/widgets/table.columntoggle.js

Lines changed: 59 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -34,26 +34,29 @@ $.mobile.table.prototype.options.classes = $.extend(
3434
}
3535
);
3636

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

4446
if( o.mode !== "columntoggle" ){
4547
return;
4648
}
4749

48-
self.element.addClass( o.classes.columnToggleTable );
50+
if ( event !== "refresh" ) {
51+
self.element.addClass( o.classes.columnToggleTable );
4952

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

5558
// create the hide/show toggles
56-
self.headers.not( "td" ).each(function(){
59+
self.headers.not( "td" ).each(function( i ){
5760

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

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

65-
$("<label><input type='checkbox' checked />" + $( this ).text() + "</label>" )
66-
.appendTo( $menu )
67-
.children( 0 )
68-
.jqmData( "cells", $cells )
69-
.checkboxradio({
70-
theme: o.columnPopupTheme
71-
});
68+
if ( event !== "refresh" ) {
69+
$("<label><input type='checkbox' checked />" + $( this ).text() + "</label>" )
70+
.appendTo( $menu )
71+
.children( 0 )
72+
.jqmData( "cells", $cells )
73+
.checkboxradio({
74+
theme: o.columnPopupTheme
75+
});
76+
} else {
77+
$('#' + id + ' fieldset div:eq(' + i +')').find('input').jqmData("cells", $cells)
78+
}
7279
}
7380
});
81+
if ( event !== "refresh" ) {
7482
$menu.appendTo( $popup );
83+
}
7584

7685
// bind change event listeners to inputs - TODO: move to a private method?
77-
$menu.on( "change", "input", function( e ){
78-
if( this.checked ){
79-
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-hidden" ).addClass( "ui-table-cell-visible" );
80-
}
81-
else {
82-
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-visible" ).addClass( "ui-table-cell-hidden" );
83-
}
84-
});
86+
if ( $menu === undefined ) {
87+
$switchboard = $('#' + id + ' fieldset');
88+
} else {
89+
$switchboard = $menu;
90+
}
8591

86-
$menuButton
87-
.insertBefore( $table )
88-
.buttonMarkup({
89-
theme: o.columnBtnTheme
92+
if (event !== "refresh") {
93+
$switchboard.on( "change", "input", function( e ){
94+
if( this.checked ){
95+
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-hidden" ).addClass( "ui-table-cell-visible" );
96+
} else {
97+
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-visible" ).addClass( "ui-table-cell-hidden" );
98+
}
9099
});
91100

92-
$popup
93-
.insertBefore( $table )
94-
.popup();
101+
$menuButton
102+
.insertBefore( $table )
103+
.buttonMarkup({
104+
theme: o.columnBtnTheme
105+
});
106+
107+
$popup
108+
.insertBefore( $table )
109+
.popup();
110+
}
95111

96112
// refresh method
97-
self.refresh = function(){
98-
$menu.find( "input" ).each( function(){
99-
this.checked = $( this ).jqmData( "cells" ).eq(0).css( "display" ) === "table-cell";
113+
self.update = function(){
114+
$switchboard.find( "input" ).each( function(){
115+
if (this.checked) {
116+
this.checked = $( this ).jqmData( "cells" ).eq(0).css( "display" ) === "table-cell";
117+
if (event === "refresh") {
118+
$( this ).jqmData( "cells" ).addClass('ui-table-cell-visible');
119+
}
120+
} else {
121+
$( this ).jqmData( "cells" ).addClass('ui-table-cell-hidden');
122+
}
100123
$( this ).checkboxradio( "refresh" );
101124
});
102125
};
103126

104-
$.mobile.window.on( "throttledresize", self.refresh );
127+
$.mobile.window.on( "throttledresize", self.update );
105128

106-
self.refresh();
129+
self.update();
107130

108131
});
109132

‎js/widgets/table.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,17 @@ $.widget( "mobile.table", $.mobile.widget, {
1919
},
2020

2121
_create: function() {
22+
var self = this;
23+
self.refresh( true );
24+
},
2225

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

26-
this.element.addClass( this.options.classes.table );
30+
if ( create ) {
31+
this.element.addClass( this.options.classes.table );
32+
}
2733

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

4147
var span = parseInt( $( this ).attr( "colspan" ), 10 ),
4248
sel = ":nth-child(" + ( coltally + 1 ) + ")";
43-
4449
$( this )
4550
.jqmData( "colstart", coltally + 1 );
4651

@@ -51,6 +56,9 @@ $.widget( "mobile.table", $.mobile.widget, {
5156
}
5257
}
5358

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

6270
});
6371

72+
// update table modes
73+
if ( create === undefined ) {
74+
this.element.trigger( 'refresh' );
75+
}
6476
}
6577

6678
});

‎js/widgets/table.reflow.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@ $.mobile.table.prototype.options.classes = $.extend(
1919
}
2020
);
2121

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

2424
var $table = $( this ),
25+
event = e.type,
2526
self = $table.data( "mobile-table" ),
2627
o = self.options;
2728

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

33-
self.element.addClass( o.classes.reflowTable );
34+
if ( event !== "refresh" ) {
35+
self.element.addClass( o.classes.reflowTable );
36+
}
3437

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

3841
// create the hide/show toggles
39-
reverseHeaders.each(function(i){
42+
reverseHeaders.each(function( i ){
4043
var $cells = $( this ).jqmData( "cells" ),
4144
colstart = $( this ).jqmData( "colstart" ),
4245
hierarchyClass = $cells.not( this ).filter( "thead th" ).length && " ui-table-cell-label-top",

‎tests/unit/table/index.html

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,18 @@
3333
<link rel="stylesheet" href="../../../external/qunit.css"/>
3434

3535
<script src="../swarminject.js"></script>
36+
37+
<script type="text/javascript">
38+
$(window).on('refresh_test_table', function (e, data) {
39+
var tb = $(data).find('tbody'),
40+
newRow = '<tr><th data-test="abc">1</th><td>2</td><td>3</td><td data-col="3">4</td><td>5</td></tr>';
41+
tb.empty()
42+
.append(newRow)
43+
.closest('table')
44+
.table('refresh');
45+
});
46+
</script>
47+
3648
</head>
3749
<body>
3850

@@ -51,11 +63,11 @@ <h1>Basic Table</h1>
5163
<table data-nstest-role="table" id="movie-table">
5264
<thead>
5365
<tr>
54-
<th data-priority="1">Rank</th>
55-
<th data-priority="persist">Movie Title</th>
56-
<th data-priority="2">Year</th>
57-
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
58-
<th data-priority="4">Reviews</th>
66+
<th data-nstest-priority="1">Rank</th>
67+
<th data-nstest-priority="persist">Movie Title</th>
68+
<th data-nstest-priority="2">Year</th>
69+
<th data-nstest-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
70+
<th data-nstest-priority="4">Reviews</th>
5971
</tr>
6072
</thead>
6173
<tbody>
@@ -78,11 +90,11 @@ <h1>Basic Table</h1>
7890
<table data-nstest-role="table" data-nstest-mode="reflow" id="movie-table-reflow">
7991
<thead>
8092
<tr>
81-
<th data-priority="1">Rank</th>
82-
<th data-priority="persist">Movie Title</th>
83-
<th data-priority="2">Year</th>
84-
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
85-
<th data-priority="4">Reviews</th>
93+
<th data-nstest-priority="1">Rank</th>
94+
<th data-nstest-priority="persist">Movie Title</th>
95+
<th data-nstest-priority="2">Year</th>
96+
<th data-nstest-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
97+
<th data-nstest-priority="4">Reviews</th>
8698
</tr>
8799
</thead>
88100
<tbody>

0 commit comments

Comments
 (0)