ColumnSelector: Add classHasSpan option

This commit is contained in:
Rob Garrison 2017-08-07 13:42:30 -05:00
parent 4e88d5516e
commit 22b5598873
2 changed files with 33 additions and 11 deletions

View File

@ -137,7 +137,13 @@
// class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
// applied icons; use this class name (input.checked) instead of input:checked
columnSelector_cssChecked : 'checked'
columnSelector_cssChecked : 'checked',
// class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody)
columnSelector_classHasSpan : 'hasSpan',
// event triggered when columnSelector completes
columnSelector_updated : 'columnUpdate'
}
});
@ -182,6 +188,7 @@
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.29.0</span>, added a <code>columnSelector_classHasSpan</code> setting.</li>
<li>In <span class="version">v2.27.0</span>,
<ul>
<li>Added two new options: <code>columnSelector_maxVisible</code> and <code>columnSelector_minVisible</code>.</li>
@ -526,6 +533,18 @@
</td>
</tr>
<tr id="column-selector-class-has-span">
<td><a href="#" class="permalink">columnSelector_classHasSpan</a></td>
<td>
Class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody) (<span class="version">v2.29.0</span>)
<div class="collapsible">
<p>This was added to allow customizing the css name in case of conflicts.</p>
<p>The grouping widget accesses this value to ensure that group rows are not hidden when the first column is toggled.</p>
Default value: <code>'hasSpan'</code>
</div>
</td>
</tr>
<tr id="column-selector-updated">
<td><a href="#" class="permalink">columnSelector_updated</a></td>
<td>

View File

@ -269,16 +269,16 @@
c.$table.triggerHandler(wo.columnSelector_updated);
}
},
addSelectors: function( prefix, column ) {
addSelectors: function( wo, prefix, column ) {
var array = [],
temp = ' col:nth-child(' + column + ')';
array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
temp = ' tr:not(.hasSpan) th[data-column="' + ( column - 1 ) + '"]';
temp = ' tr:not(.' + wo.columnSelector_classHasSpan + ') th[data-column="' + ( column - 1 ) + '"]';
array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
temp = ' tr:not(.hasSpan) td:nth-child(' + column + ')';
temp = ' tr:not(.' + wo.columnSelector_classHasSpan + ') td:nth-child(' + column + ')';
array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
// for other cells in colspan columns
temp = ' tr td:not(' + prefix + 'HasSpan)[data-column="' + (column - 1) + '"]';
temp = ' tr td:not(' + prefix + wo.columnSelector_classHasSpan + ')[data-column="' + (column - 1) + '"]';
array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
return array;
},
@ -301,7 +301,7 @@
isHidden[ column + 1 ] = ts.getData( c.$headerIndexed[ column ], col, 'columnSelector' ) === 'false';
if ( isHidden[ column + 1 ] ) {
// hide columnSelector false column (in auto mode)
mediaAll = mediaAll.concat( tsColSel.addSelectors( prefix, column + 1 ) );
mediaAll = mediaAll.concat( tsColSel.addSelectors( wo, prefix, column + 1 ) );
}
}
}
@ -313,7 +313,7 @@
column = parseInt($(this).attr('data-column'), 10) + 1;
// don't reveal columnSelector false columns
if ( !isHidden[ column ] ) {
breaks = breaks.concat( tsColSel.addSelectors( prefix, column ) );
breaks = breaks.concat( tsColSel.addSelectors( wo, prefix, column ) );
}
});
if (breaks.length) {
@ -343,7 +343,7 @@
colSel.$container.find('input[data-column]').filter('[data-column!="auto"]').each(function(){
if (!this.checked) {
column = parseInt( $(this).attr('data-column'), 10 ) + 1;
styles = styles.concat( tsColSel.addSelectors( prefix, column ) );
styles = styles.concat( tsColSel.addSelectors( wo, prefix, column ) );
}
$(this).toggleClass( wo.columnSelector_cssChecked, this.checked );
});
@ -373,10 +373,10 @@
if ( span > 1 ) {
hasSpans = true;
$cells.eq( index )
.addClass( c.namespace.slice( 1 ) + 'columnselectorHasSpan' )
.addClass( c.namespace.slice( 1 ) + 'columnselector' + wo.columnSelector_classHasSpan )
.attr( 'data-col-span', span );
// add data-column values
ts.computeColumnIndex( $cells.eq( index ).parent().addClass( 'hasSpan' ) );
ts.computeColumnIndex( $cells.eq( index ).parent().addClass( wo.columnSelector_classHasSpan ) );
}
}
// only add resize end if using media queries
@ -533,6 +533,8 @@
// class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
// applied icons; use this class name (input.checked) instead of input:checked
columnSelector_cssChecked : 'checked',
// class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody)
columnSelector_classHasSpan : 'hasSpan',
// event triggered when columnSelector completes
columnSelector_updated : 'columnUpdate'
},
@ -546,7 +548,8 @@
if ( csel.$popup ) { csel.$popup.empty(); }
csel.$style.remove();
csel.$breakpoints.remove();
$( c.namespace + 'columnselectorHasSpan' ).removeClass( wo.filter_filteredRow || 'filtered' );
$( c.namespace + 'columnselector' + wo.columnSelector_classHasSpan )
.removeClass( wo.filter_filteredRow || 'filtered' );
c.$table.find('[data-col-span]').each(function(indx, el) {
var $el = $(el);
console.log($el, $el.attr('data-col-span'));