暫無描述

buttons.colVis.js 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. /*!
  2. * Column visibility buttons for Buttons and DataTables.
  3. * 2016 SpryMedia Ltd - datatables.net/license
  4. */
  5. (function( factory ){
  6. if ( typeof define === 'function' && define.amd ) {
  7. // AMD
  8. define( ['jquery', 'datatables.net', 'datatables.net-buttons'], function ( $ ) {
  9. return factory( $, window, document );
  10. } );
  11. }
  12. else if ( typeof exports === 'object' ) {
  13. // CommonJS
  14. module.exports = function (root, $) {
  15. if ( ! root ) {
  16. root = window;
  17. }
  18. if ( ! $ || ! $.fn.dataTable ) {
  19. $ = require('datatables.net')(root, $).$;
  20. }
  21. if ( ! $.fn.dataTable.Buttons ) {
  22. require('datatables.net-buttons')(root, $);
  23. }
  24. return factory( $, root, root.document );
  25. };
  26. }
  27. else {
  28. // Browser
  29. factory( jQuery, window, document );
  30. }
  31. }(function( $, window, document, undefined ) {
  32. 'use strict';
  33. var DataTable = $.fn.dataTable;
  34. $.extend( DataTable.ext.buttons, {
  35. // A collection of column visibility buttons
  36. colvis: function ( dt, conf ) {
  37. return {
  38. extend: 'collection',
  39. text: function ( dt ) {
  40. return dt.i18n( 'buttons.colvis', 'Column visibility' );
  41. },
  42. className: 'buttons-colvis',
  43. buttons: [ {
  44. extend: 'columnsToggle',
  45. columns: conf.columns,
  46. columnText: conf.columnText
  47. } ]
  48. };
  49. },
  50. // Selected columns with individual buttons - toggle column visibility
  51. columnsToggle: function ( dt, conf ) {
  52. var columns = dt.columns( conf.columns ).indexes().map( function ( idx ) {
  53. return {
  54. extend: 'columnToggle',
  55. columns: idx,
  56. columnText: conf.columnText
  57. };
  58. } ).toArray();
  59. return columns;
  60. },
  61. // Single button to toggle column visibility
  62. columnToggle: function ( dt, conf ) {
  63. return {
  64. extend: 'columnVisibility',
  65. columns: conf.columns,
  66. columnText: conf.columnText
  67. };
  68. },
  69. // Selected columns with individual buttons - set column visibility
  70. columnsVisibility: function ( dt, conf ) {
  71. var columns = dt.columns( conf.columns ).indexes().map( function ( idx ) {
  72. return {
  73. extend: 'columnVisibility',
  74. columns: idx,
  75. visibility: conf.visibility,
  76. columnText: conf.columnText
  77. };
  78. } ).toArray();
  79. return columns;
  80. },
  81. // Single button to set column visibility
  82. columnVisibility: {
  83. columns: undefined, // column selector
  84. text: function ( dt, button, conf ) {
  85. return conf._columnText( dt, conf );
  86. },
  87. className: 'buttons-columnVisibility',
  88. action: function ( e, dt, button, conf ) {
  89. var col = dt.columns( conf.columns );
  90. var curr = col.visible();
  91. col.visible( conf.visibility !== undefined ?
  92. conf.visibility :
  93. ! (curr.length ? curr[0] : false )
  94. );
  95. },
  96. init: function ( dt, button, conf ) {
  97. var that = this;
  98. button.attr( 'data-cv-idx', conf.columns );
  99. dt
  100. .on( 'column-visibility.dt'+conf.namespace, function (e, settings) {
  101. if ( ! settings.bDestroying && settings.nTable == dt.settings()[0].nTable ) {
  102. that.active( dt.column( conf.columns ).visible() );
  103. }
  104. } )
  105. .on( 'column-reorder.dt'+conf.namespace, function (e, settings, details) {
  106. if ( dt.columns( conf.columns ).count() !== 1 ) {
  107. return;
  108. }
  109. // This button controls the same column index but the text for the column has
  110. // changed
  111. button.text( conf._columnText( dt, conf ) );
  112. // Since its a different column, we need to check its visibility
  113. that.active( dt.column( conf.columns ).visible() );
  114. } );
  115. this.active( dt.column( conf.columns ).visible() );
  116. },
  117. destroy: function ( dt, button, conf ) {
  118. dt
  119. .off( 'column-visibility.dt'+conf.namespace )
  120. .off( 'column-reorder.dt'+conf.namespace );
  121. },
  122. _columnText: function ( dt, conf ) {
  123. // Use DataTables' internal data structure until this is presented
  124. // is a public API. The other option is to use
  125. // `$( column(col).node() ).text()` but the node might not have been
  126. // populated when Buttons is constructed.
  127. var idx = dt.column( conf.columns ).index();
  128. var title = dt.settings()[0].aoColumns[ idx ].sTitle
  129. .replace(/\n/g," ") // remove new lines
  130. .replace(/<br\s*\/?>/gi, " ") // replace line breaks with spaces
  131. .replace(/<select(.*?)<\/select>/g, "") // remove select tags, including options text
  132. .replace(/<!\-\-.*?\-\->/g, "") // strip HTML comments
  133. .replace(/<.*?>/g, "") // strip HTML
  134. .replace(/^\s+|\s+$/g,""); // trim
  135. return conf.columnText ?
  136. conf.columnText( dt, idx, title ) :
  137. title;
  138. }
  139. },
  140. colvisRestore: {
  141. className: 'buttons-colvisRestore',
  142. text: function ( dt ) {
  143. return dt.i18n( 'buttons.colvisRestore', 'Restore visibility' );
  144. },
  145. init: function ( dt, button, conf ) {
  146. conf._visOriginal = dt.columns().indexes().map( function ( idx ) {
  147. return dt.column( idx ).visible();
  148. } ).toArray();
  149. },
  150. action: function ( e, dt, button, conf ) {
  151. dt.columns().every( function ( i ) {
  152. // Take into account that ColReorder might have disrupted our
  153. // indexes
  154. var idx = dt.colReorder && dt.colReorder.transpose ?
  155. dt.colReorder.transpose( i, 'toOriginal' ) :
  156. i;
  157. this.visible( conf._visOriginal[ idx ] );
  158. } );
  159. }
  160. },
  161. colvisGroup: {
  162. className: 'buttons-colvisGroup',
  163. action: function ( e, dt, button, conf ) {
  164. dt.columns( conf.show ).visible( true, false );
  165. dt.columns( conf.hide ).visible( false, false );
  166. dt.columns.adjust();
  167. },
  168. show: [],
  169. hide: []
  170. }
  171. } );
  172. return DataTable.Buttons;
  173. }));