X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=docs%2Fsrc%2FRoo_bootstrap_Table.js.html;fp=docs%2Fsrc%2FRoo_bootstrap_Table.js.html;h=43300161bb21224411b6dabb5d11d637f3ba5678;hp=74b77a520c1e0623f6d686a7d470f003106db631;hb=8d4aa09e387bf0f91ad47847e5bac698c2ded8f3;hpb=d81ddeecb21edfe27401017eb4d0cc01dfae425b diff --git a/docs/src/Roo_bootstrap_Table.js.html b/docs/src/Roo_bootstrap_Table.js.html index 74b77a520c..43300161bb 100644 --- a/docs/src/Roo_bootstrap_Table.js.html +++ b/docs/src/Roo_bootstrap_Table.js.html @@ -74,7 +74,8 @@ Currently the Table uses multiple headers to try and handle XL / Medium etc... * @cfg {boolean} bordered Add borders to the table * @cfg {boolean} hover Add hover highlighting * @cfg {boolean} condensed Format condensed - * @cfg {boolean} responsive Format condensed + * @cfg {boolean} responsive default false - if this is on, columns are rendered with col-xs-4 etc. classes, otherwise columns will be sized by CSS, + * also adds table-responsive (see bootstrap docs for details) * @cfg {Boolean} loadMask (true|false) default false * @cfg {Boolean} footerShow (true|false) generate tfoot, default true * @cfg {Boolean} headerShow (true|false) generate thead, default true @@ -483,6 +484,12 @@ Currently the Table uses multiple headers to try and handle XL / Medium etc... width = "width:" + w+ "px;"; } + if (this.responsive) { + width = ''; + left = ''; + hidden = cm.isHidden(i) ? 'display:none' : ''; + splithide = 'display: none'; + } styles.push( '#' , this.id , ' .x-col-' , i, " {", cm.config[i].css, width, hidden, "}\n" ); if (this.headEl) { @@ -496,7 +503,7 @@ Currently the Table uses multiple headers to try and handle XL / Medium etc... } } - Roo.log(styles.join('')); + //Roo.log(styles.join('')); this.CSS.createStyleSheet( styles.join(''), this.id + '-cssrules'); }, @@ -809,28 +816,29 @@ Currently the Table uses multiple headers to try and handle XL / Medium etc... } // this is the bit that doesnt reall work at all... - /* - - ['xs','sm','md','lg'].map(function(size){ - - if(typeof(config[size]) == 'undefined'){ - return; - } - - if (!config[size]) { // 0 = hidden - // BS 4 '0' is treated as hide that column and below. - c.cls += ' hidden-' + size + ' hidden' + size + '-down'; - return; - } - - c.cls += ' col-' + size + '-' + config[size] + ( - size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs - ); - - - }); - */ - // at the end? + if (this.responsive) { + + + ['xs','sm','md','lg'].map(function(size){ + + if(typeof(config[size]) == 'undefined'){ + return; + } + + if (!config[size]) { // 0 = hidden + // BS 4 '0' is treated as hide that column and below. + c.cls += ' hidden-' + size + ' hidden' + size + '-down'; + return; + } + + c.cls += ' col-' + size + '-' + config[size] + ( + size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs + ); + + + }); + } + // at the end? c.html +=' <span class="x-grid-split x-grid-split-' + i + '"></span>'; @@ -1267,28 +1275,28 @@ Currently the Table uses multiple headers to try and handle XL / Medium etc... if(typeof(config.cls) != 'undefined'){ td.cls = (typeof(td.cls) == 'undefined') ? config.cls : (td.cls + ' ' + config.cls); } - /* - ['xs','sm','md','lg'].map(function(size){ - - if(typeof(config[size]) == 'undefined'){ - return; - } - - - - if (!config[size]) { // 0 = hidden - // BS 4 '0' is treated as hide that column and below. - td.cls += ' hidden-' + size + ' hidden' + size + '-down'; - return; - } - - td.cls += ' col-' + size + '-' + config[size] + ( - size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs - ); - + if (this.responsive) { + ['xs','sm','md','lg'].map(function(size){ - }); - */ + if(typeof(config[size]) == 'undefined'){ + return; + } + + + + if (!config[size]) { // 0 = hidden + // BS 4 '0' is treated as hide that column and below. + td.cls += ' hidden-' + size + ' hidden' + size + '-down'; + return; + } + + td.cls += ' col-' + size + '-' + config[size] + ( + size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs + ); + + + }); + } row.cn.push(td); } @@ -1521,17 +1529,20 @@ Currently the Table uses multiple headers to try and handle XL / Medium etc... onHiddenChange : function(colModel, colIndex, hidden) { - var thSelector = '#' + this.id + ' .x-hcol-' + colIndex; - var tdSelector = '#' + this.id + ' .x-col-' + colIndex; - - this.CSS.updateRule(thSelector, "display", ""); - this.CSS.updateRule(tdSelector, "display", ""); - - if(hidden){ - this.CSS.updateRule(thSelector, "display", "none"); - this.CSS.updateRule(tdSelector, "display", "none"); + /* + this.cm.setHidden() + var thSelector = '#' + this.id + ' .x-hcol-' + colIndex; + var tdSelector = '#' + this.id + ' .x-col-' + colIndex; + + this.CSS.updateRule(thSelector, "display", ""); + this.CSS.updateRule(tdSelector, "display", ""); + + if(hidden){ + this.CSS.updateRule(thSelector, "display", "none"); + this.CSS.updateRule(tdSelector, "display", "none"); } - + */ + // onload calls initCSS() this.onHeaderChange(); this.onLoad(); },