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