Blame | Letzte Änderung | Log anzeigen | RSS feed
/*! ColVis 1.1.1* ©2010-2014 SpryMedia Ltd - datatables.net/license*//*** @summary ColVis* @description Controls for column visibility in DataTables* @version 1.1.1* @file dataTables.colReorder.js* @author SpryMedia Ltd (www.sprymedia.co.uk)* @contact www.sprymedia.co.uk/contact* @copyright Copyright 2010-2014 SpryMedia Ltd.** This source file is free software, available under the following license:* MIT license - http://datatables.net/license/mit** This source file is distributed in the hope that it will be useful, but* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY* or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.** For details please refer to: http://www.datatables.net*/(function(window, document, undefined) {var factory = function( $, DataTable ) {"use strict";/*** ColVis provides column visibility control for DataTables** @class ColVis* @constructor* @param {object} DataTables settings object. With DataTables 1.10 this can* also be and API instance, table node, jQuery collection or jQuery selector.* @param {object} ColVis configuration options*/var ColVis = function( oDTSettings, oInit ){/* Santiy check that we are a new instance */if ( !this.CLASS || this.CLASS != "ColVis" ){alert( "Warning: ColVis must be initialised with the keyword 'new'" );}if ( typeof oInit == 'undefined' ){oInit = {};}if ( $.fn.dataTable.camelToHungarian ) {$.fn.dataTable.camelToHungarian( ColVis.defaults, oInit );}/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** Public class variables* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *//*** @namespace Settings object which contains customisable information for* ColVis instance. Augmented by ColVis.defaults*/this.s = {/*** DataTables settings object* @property dt* @type Object* @default null*/"dt": null,/*** Customisation object* @property oInit* @type Object* @default passed in*/"oInit": oInit,/*** Flag to say if the collection is hidden* @property hidden* @type boolean* @default true*/"hidden": true,/*** Store the original visibility settings so they could be restored* @property abOriginal* @type Array* @default []*/"abOriginal": []};/*** @namespace Common and useful DOM elements for the class instance*/this.dom = {/*** Wrapper for the button - given back to DataTables as the node to insert* @property wrapper* @type Node* @default null*/"wrapper": null,/*** Activation button* @property button* @type Node* @default null*/"button": null,/*** Collection list node* @property collection* @type Node* @default null*/"collection": null,/*** Background node used for shading the display and event capturing* @property background* @type Node* @default null*/"background": null,/*** Element to position over the activation button to catch mouse events when using mouseover* @property catcher* @type Node* @default null*/"catcher": null,/*** List of button elements* @property buttons* @type Array* @default []*/"buttons": [],/*** List of group button elements* @property groupButtons* @type Array* @default []*/"groupButtons": [],/*** Restore button* @property restore* @type Node* @default null*/"restore": null};/* Store global reference */ColVis.aInstances.push( this );/* Constructor logic */this.s.dt = $.fn.dataTable.Api ?new $.fn.dataTable.Api( oDTSettings ).settings()[0] :oDTSettings;this._fnConstruct( oInit );return this;};ColVis.prototype = {/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** Public methods* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *//*** Get the ColVis instance's control button so it can be injected into the* DOM* @method button* @returns {node} ColVis button*/button: function (){return this.dom.wrapper;},/*** Alias of `rebuild` for backwards compatibility* @method fnRebuild*/"fnRebuild": function (){this.rebuild();},/*** Rebuild the list of buttons for this instance (i.e. if there is a column* header update)* @method fnRebuild*/rebuild: function (){/* Remove the old buttons */for ( var i=this.dom.buttons.length-1 ; i>=0 ; i-- ) {this.dom.collection.removeChild( this.dom.buttons[i] );}this.dom.buttons.splice( 0, this.dom.buttons.length );if ( this.dom.restore ) {this.dom.restore.parentNode( this.dom.restore );}/* Re-add them (this is not the optimal way of doing this, it is fast and effective) */this._fnAddGroups();this._fnAddButtons();/* Update the checkboxes */this._fnDrawCallback();},/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** Private methods (they are of course public in JS, but recommended as private)* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *//*** Constructor logic* @method _fnConstruct* @returns void* @private*/"_fnConstruct": function ( init ){this._fnApplyCustomisation( init );var that = this;var i, iLen;this.dom.wrapper = document.createElement('div');this.dom.wrapper.className = "ColVis";this.dom.button = $( '<button />', {'class': !this.s.dt.bJUI ?"ColVis_Button ColVis_MasterButton" :"ColVis_Button ColVis_MasterButton ui-button ui-state-default"} ).append( '<span>'+this.s.buttonText+'</span>' ).bind( this.s.activate=="mouseover" ? "mouseover" : "click", function (e) {e.preventDefault();that._fnCollectionShow();} ).appendTo( this.dom.wrapper )[0];this.dom.catcher = this._fnDomCatcher();this.dom.collection = this._fnDomCollection();this.dom.background = this._fnDomBackground();this._fnAddGroups();this._fnAddButtons();/* Store the original visibility information */for ( i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ ){this.s.abOriginal.push( this.s.dt.aoColumns[i].bVisible );}/* Update on each draw */this.s.dt.aoDrawCallback.push( {"fn": function () {that._fnDrawCallback.call( that );},"sName": "ColVis"} );/* If columns are reordered, then we need to update our exclude list and* rebuild the displayed list*/$(this.s.dt.oInstance).bind( 'column-reorder', function ( e, oSettings, oReorder ) {for ( i=0, iLen=that.s.aiExclude.length ; i<iLen ; i++ ) {that.s.aiExclude[i] = oReorder.aiInvertMapping[ that.s.aiExclude[i] ];}var mStore = that.s.abOriginal.splice( oReorder.iFrom, 1 )[0];that.s.abOriginal.splice( oReorder.iTo, 0, mStore );that.fnRebuild();} );// Set the initial statethis._fnDrawCallback();},/*** Apply any customisation to the settings from the DataTables initialisation* @method _fnApplyCustomisation* @returns void* @private*/"_fnApplyCustomisation": function ( init ){$.extend( true, this.s, ColVis.defaults, init );// Slightly messy overlap for the camelCase notationif ( ! this.s.showAll && this.s.bShowAll ) {this.s.showAll = this.s.sShowAll;}if ( ! this.s.restore && this.s.bRestore ) {this.s.restore = this.s.sRestore;}// CamelCase to Hungarian for the column groupsvar groups = this.s.groups;var hungarianGroups = this.s.aoGroups;if ( groups ) {for ( var i=0, ien=groups.length ; i<ien ; i++ ) {if ( groups[i].title ) {hungarianGroups[i].sTitle = groups[i].title;}if ( groups[i].columns ) {hungarianGroups[i].aiColumns = groups[i].columns;}}}},/*** On each table draw, check the visibility checkboxes as needed. This allows any process to* update the table's column visibility and ColVis will still be accurate.* @method _fnDrawCallback* @returns void* @private*/"_fnDrawCallback": function (){var columns = this.s.dt.aoColumns;var buttons = this.dom.buttons;var groups = this.s.aoGroups;var button;for ( var i=0, ien=buttons.length ; i<ien ; i++ ) {button = buttons[i];if ( button.__columnIdx !== undefined ) {$('input', button).prop( 'checked', columns[ button.__columnIdx ].bVisible );}}var allVisible = function ( columnIndeces ) {for ( var k=0, kLen=columnIndeces.length ; k<kLen ; k++ ){if ( columns[columnIndeces[k]].bVisible === false ) { return false; }}return true;};var allHidden = function ( columnIndeces ) {for ( var m=0 , mLen=columnIndeces.length ; m<mLen ; m++ ){if ( columns[columnIndeces[m]].bVisible === true ) { return false; }}return true;};for ( var j=0, jLen=groups.length ; j<jLen ; j++ ){if ( allVisible(groups[j].aiColumns) ){$('input', this.dom.groupButtons[j]).prop('checked', true);$('input', this.dom.groupButtons[j]).prop('indeterminate', false);}else if ( allHidden(groups[j].aiColumns) ){$('input', this.dom.groupButtons[j]).prop('checked', false);$('input', this.dom.groupButtons[j]).prop('indeterminate', false);}else{$('input', this.dom.groupButtons[j]).prop('indeterminate', true);}}},/*** Loop through the groups (provided in the settings) and create a button for each.* @method _fnAddgroups* @returns void* @private*/"_fnAddGroups": function (){var nButton;if ( typeof this.s.aoGroups != 'undefined' ){for ( var i=0, iLen=this.s.aoGroups.length ; i<iLen ; i++ ){nButton = this._fnDomGroupButton( i );this.dom.groupButtons.push( nButton );this.dom.buttons.push( nButton );this.dom.collection.appendChild( nButton );}}},/*** Loop through the columns in the table and as a new button for each one.* @method _fnAddButtons* @returns void* @private*/"_fnAddButtons": function (){varnButton,columns = this.s.dt.aoColumns;if ( $.inArray( 'all', this.s.aiExclude ) === -1 ) {for ( var i=0, iLen=columns.length ; i<iLen ; i++ ){if ( $.inArray( i, this.s.aiExclude ) === -1 ){nButton = this._fnDomColumnButton( i );nButton.__columnIdx = i;this.dom.buttons.push( nButton );}}}if ( this.s.order === 'alpha' ) {this.dom.buttons.sort( function ( a, b ) {var titleA = columns[ a.__columnIdx ].sTitle;var titleB = columns[ b.__columnIdx ].sTitle;return titleA === titleB ?0 :titleA < titleB ?-1 :1;} );}if ( this.s.restore ){nButton = this._fnDomRestoreButton();nButton.className += " ColVis_Restore";this.dom.buttons.push( nButton );}if ( this.s.showAll ){nButton = this._fnDomShowXButton( this.s.showAll, true );nButton.className += " ColVis_ShowAll";this.dom.buttons.push( nButton );}if ( this.s.showNone ){nButton = this._fnDomShowXButton( this.s.showNone, false );nButton.className += " ColVis_ShowNone";this.dom.buttons.push( nButton );}$(this.dom.collection).append( this.dom.buttons );},/*** Create a button which allows a "restore" action* @method _fnDomRestoreButton* @returns {Node} Created button* @private*/"_fnDomRestoreButton": function (){varthat = this,dt = this.s.dt;return $('<li class="ColVis_Special '+(dt.bJUI ? 'ui-button ui-state-default' : '')+'">'+this.s.restore+'</li>').click( function (e) {for ( var i=0, iLen=that.s.abOriginal.length ; i<iLen ; i++ ){that.s.dt.oInstance.fnSetColumnVis( i, that.s.abOriginal[i], false );}that._fnAdjustOpenRows();that.s.dt.oInstance.fnAdjustColumnSizing( false );that.s.dt.oInstance.fnDraw( false );} )[0];},/*** Create a button which allows show all and show node actions* @method _fnDomShowXButton* @returns {Node} Created button* @private*/"_fnDomShowXButton": function ( str, action ){varthat = this,dt = this.s.dt;return $('<li class="ColVis_Special '+(dt.bJUI ? 'ui-button ui-state-default' : '')+'">'+str+'</li>').click( function (e) {for ( var i=0, iLen=that.s.abOriginal.length ; i<iLen ; i++ ){if (that.s.aiExclude.indexOf(i) === -1){that.s.dt.oInstance.fnSetColumnVis( i, action, false );}}that._fnAdjustOpenRows();that.s.dt.oInstance.fnAdjustColumnSizing( false );that.s.dt.oInstance.fnDraw( false );} )[0];},/*** Create the DOM for a show / hide group button* @method _fnDomGroupButton* @param {int} i Group in question, order based on that provided in settings* @returns {Node} Created button* @private*/"_fnDomGroupButton": function ( i ){varthat = this,dt = this.s.dt,oGroup = this.s.aoGroups[i];return $('<li class="ColVis_Special '+(dt.bJUI ? 'ui-button ui-state-default' : '')+'">'+'<label>'+'<input type="checkbox" />'+'<span>'+oGroup.sTitle+'</span>'+'</label>'+'</li>').click( function (e) {var showHide = !$('input', this).is(":checked");if ( e.target.nodeName.toLowerCase() !== "li" ){showHide = ! showHide;}for ( var j=0 ; j < oGroup.aiColumns.length ; j++ ){that.s.dt.oInstance.fnSetColumnVis( oGroup.aiColumns[j], showHide );}} )[0];},/*** Create the DOM for a show / hide button* @method _fnDomColumnButton* @param {int} i Column in question* @returns {Node} Created button* @private*/"_fnDomColumnButton": function ( i ){varthat = this,column = this.s.dt.aoColumns[i],dt = this.s.dt;var title = this.s.fnLabel===null ?column.sTitle :this.s.fnLabel( i, column.sTitle, column.nTh );return $('<li '+(dt.bJUI ? 'class="ui-button ui-state-default"' : '')+'>'+'<label>'+'<input type="checkbox" />'+'<span>'+title+'</span>'+'</label>'+'</li>').click( function (e) {var showHide = !$('input', this).is(":checked");if ( e.target.nodeName.toLowerCase() !== "li" ){showHide = ! showHide;}/* Need to consider the case where the initialiser created more than one table - change the* API index that DataTables is using*/var oldIndex = $.fn.dataTableExt.iApiIndex;$.fn.dataTableExt.iApiIndex = that._fnDataTablesApiIndex.call(that);// Optimisation for server-side processing when scrolling - don't do a full redrawif ( dt.oFeatures.bServerSide ){that.s.dt.oInstance.fnSetColumnVis( i, showHide, false );that.s.dt.oInstance.fnAdjustColumnSizing( false );if (dt.oScroll.sX !== "" || dt.oScroll.sY !== "" ){that.s.dt.oInstance.oApi._fnScrollDraw( that.s.dt );}that._fnDrawCallback();}else{that.s.dt.oInstance.fnSetColumnVis( i, showHide );}$.fn.dataTableExt.iApiIndex = oldIndex; /* Restore */if ( e.target.nodeName.toLowerCase() === 'input' && that.s.fnStateChange !== null ){that.s.fnStateChange.call( that, i, showHide );}} )[0];},/*** Get the position in the DataTables instance array of the table for this* instance of ColVis* @method _fnDataTablesApiIndex* @returns {int} Index* @private*/"_fnDataTablesApiIndex": function (){for ( var i=0, iLen=this.s.dt.oInstance.length ; i<iLen ; i++ ){if ( this.s.dt.oInstance[i] == this.s.dt.nTable ){return i;}}return 0;},/*** Create the element used to contain list the columns (it is shown and* hidden as needed)* @method _fnDomCollection* @returns {Node} div container for the collection* @private*/"_fnDomCollection": function (){return $('<ul />', {'class': !this.s.dt.bJUI ?"ColVis_collection" :"ColVis_collection ui-buttonset ui-buttonset-multi"} ).css( {'display': 'none','opacity': 0,'position': ! this.s.bCssPosition ?'absolute' :''} )[0];},/*** An element to be placed on top of the activate button to catch events* @method _fnDomCatcher* @returns {Node} div container for the collection* @private*/"_fnDomCatcher": function (){varthat = this,nCatcher = document.createElement('div');nCatcher.className = "ColVis_catcher";$(nCatcher).click( function () {that._fnCollectionHide.call( that, null, null );} );return nCatcher;},/*** Create the element used to shade the background, and capture hide events (it is shown and* hidden as needed)* @method _fnDomBackground* @returns {Node} div container for the background* @private*/"_fnDomBackground": function (){var that = this;var background = $('<div></div>').addClass( 'ColVis_collectionBackground' ).css( 'opacity', 0 ).click( function () {that._fnCollectionHide.call( that, null, null );} );/* When considering a mouse over action for the activation, we also consider a mouse out* which is the same as a mouse over the background - without all the messing around of* bubbling events. Use the catcher element to avoid messing around with bubbling*/if ( this.s.activate == "mouseover" ){background.mouseover( function () {that.s.overcollection = false;that._fnCollectionHide.call( that, null, null );} );}return background[0];},/*** Show the show / hide list and the background* @method _fnCollectionShow* @returns void* @private*/"_fnCollectionShow": function (){var that = this, i, iLen, iLeft;var oPos = $(this.dom.button).offset();var nHidden = this.dom.collection;var nBackground = this.dom.background;var iDivX = parseInt(oPos.left, 10);var iDivY = parseInt(oPos.top + $(this.dom.button).outerHeight(), 10);if ( ! this.s.bCssPosition ){nHidden.style.top = iDivY+"px";nHidden.style.left = iDivX+"px";}$(nHidden).css( {'display': 'block','opacity': 0} );nBackground.style.bottom ='0px';nBackground.style.right = '0px';var oStyle = this.dom.catcher.style;oStyle.height = $(this.dom.button).outerHeight()+"px";oStyle.width = $(this.dom.button).outerWidth()+"px";oStyle.top = oPos.top+"px";oStyle.left = iDivX+"px";document.body.appendChild( nBackground );document.body.appendChild( nHidden );document.body.appendChild( this.dom.catcher );/* This results in a very small delay for the end user but it allows the animation to be* much smoother. If you don't want the animation, then the setTimeout can be removed*/$(nHidden).animate({"opacity": 1}, that.s.iOverlayFade);$(nBackground).animate({"opacity": 0.1}, that.s.iOverlayFade, 'linear', function () {/* In IE6 if you set the checked attribute of a hidden checkbox, then this is not visually* reflected. As such, we need to do it here, once it is visible. Unbelievable.*/if ( $.browser && $.browser.msie && $.browser.version == "6.0" ){that._fnDrawCallback();}});/* Visual corrections to try and keep the collection visible */if ( !this.s.bCssPosition ){iLeft = ( this.s.sAlign=="left" ) ?iDivX :iDivX - $(nHidden).outerWidth() + $(this.dom.button).outerWidth();nHidden.style.left = iLeft+"px";var iDivWidth = $(nHidden).outerWidth();var iDivHeight = $(nHidden).outerHeight();var iDocWidth = $(document).width();if ( iLeft + iDivWidth > iDocWidth ){nHidden.style.left = (iDocWidth-iDivWidth)+"px";}}this.s.hidden = false;},/*** Hide the show / hide list and the background* @method _fnCollectionHide* @returns void* @private*/"_fnCollectionHide": function ( ){var that = this;if ( !this.s.hidden && this.dom.collection !== null ){this.s.hidden = true;$(this.dom.collection).animate({"opacity": 0}, that.s.iOverlayFade, function (e) {this.style.display = "none";} );$(this.dom.background).animate({"opacity": 0}, that.s.iOverlayFade, function (e) {document.body.removeChild( that.dom.background );document.body.removeChild( that.dom.catcher );} );}},/*** Alter the colspan on any fnOpen rows*/"_fnAdjustOpenRows": function (){var aoOpen = this.s.dt.aoOpenRows;var iVisible = this.s.dt.oApi._fnVisbleColumns( this.s.dt );for ( var i=0, iLen=aoOpen.length ; i<iLen ; i++ ) {aoOpen[i].nTr.getElementsByTagName('td')[0].colSpan = iVisible;}}};/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** Static object methods* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *//*** Rebuild the collection for a given table, or all tables if no parameter given* @method ColVis.fnRebuild* @static* @param object oTable DataTable instance to consider - optional* @returns void*/ColVis.fnRebuild = function ( oTable ){var nTable = null;if ( typeof oTable != 'undefined' ){nTable = oTable.fnSettings().nTable;}for ( var i=0, iLen=ColVis.aInstances.length ; i<iLen ; i++ ){if ( typeof oTable == 'undefined' || nTable == ColVis.aInstances[i].s.dt.nTable ){ColVis.aInstances[i].fnRebuild();}}};ColVis.defaults = {/*** Mode of activation. Can be 'click' or 'mouseover'* @property activate* @type string* @default click*/active: 'click',/*** Text used for the button* @property buttonText* @type string* @default Show / hide columns*/buttonText: 'Show / hide columns',/*** List of columns (integers) which should be excluded from the list* @property aiExclude* @type array* @default []*/aiExclude: [],/*** Show restore button* @property bRestore* @type boolean* @default false*/bRestore: false,/*** Restore button text* @property sRestore* @type string* @default Restore original*/sRestore: 'Restore original',/*** Show Show-All button* @property bShowAll* @type boolean* @default false*/bShowAll: false,/*** Show All button text* @property sShowAll* @type string* @default Restore original*/sShowAll: 'Show All',/*** Position of the collection menu when shown - align "left" or "right"* @property sAlign* @type string* @default left*/sAlign: 'left',/*** Callback function to tell the user when the state has changed* @property fnStateChange* @type function* @default null*/fnStateChange: null,/*** Overlay animation duration in mS* @property iOverlayFade* @type integer|false* @default 500*/iOverlayFade: 500,/*** Label callback for column names. Takes three parameters: 1. the* column index, 2. the column title detected by DataTables and 3. the* TH node for the column* @property fnLabel* @type function* @default null*/fnLabel: null,/*** Indicate if the column list should be positioned by Javascript,* visually below the button or allow CSS to do the positioning* @property bCssPosition* @type boolean* @default false*/bCssPosition: false,/*** Group buttons* @property aoGroups* @type array* @default []*/aoGroups: [],/*** Button ordering - 'alpha' (alphabetical) or 'column' (table column* order)* @property order* @type string* @default column*/order: 'column'};/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** Static object properties* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *//*** Collection of all ColVis instances* @property ColVis.aInstances* @static* @type Array* @default []*/ColVis.aInstances = [];/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** Constants* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *//*** Name of this class* @constant CLASS* @type String* @default ColVis*/ColVis.prototype.CLASS = "ColVis";/*** ColVis version* @constant VERSION* @type String* @default See code*/ColVis.VERSION = "1.1.1";ColVis.prototype.VERSION = ColVis.VERSION;/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** Initialisation* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *//** Register a new feature with DataTables*/if ( typeof $.fn.dataTable == "function" &&typeof $.fn.dataTableExt.fnVersionCheck == "function" &&$.fn.dataTableExt.fnVersionCheck('1.7.0') ){$.fn.dataTableExt.aoFeatures.push( {"fnInit": function( oDTSettings ) {var init = oDTSettings.oInit;var colvis = new ColVis( oDTSettings, init.colVis || init.oColVis || {} );return colvis.button();},"cFeature": "C","sFeature": "ColVis"} );}else{alert( "Warning: ColVis requires DataTables 1.7 or greater - www.datatables.net/download");}// Make ColVis accessible from the DataTables instance$.fn.dataTable.ColVis = ColVis;$.fn.DataTable.ColVis = ColVis;return ColVis;}; // /factory// Define as an AMD module if possibleif ( typeof define === 'function' && define.amd ) {define( ['jquery', 'datatables'], factory );}else if ( typeof exports === 'object' ) {// Node/CommonJSfactory( require('jquery'), require('datatables') );}else if ( jQuery && !jQuery.fn.dataTable.ColVis ) {// Otherwise simply initialise as normal, stopping multiple evaluationfactory( jQuery, jQuery.fn.dataTable );}})(window, document);