Tabellenauswahlspalten Widget

Question

Ich verwende das Column Selector Widget auf Motties exzellentem Tabellensorter. Es funktioniert super!

Wenn ein Benutzer jedoch auf die Schaltfläche klickt (nur im Modus "CSS-Popup"), können Sie das Auswahlmodal nur durch erneutes Klicken auf dieselbe Schaltfläche schließen. Dies ist nicht konsistent mit dem Rest meiner App, was die Bootstrap-Modalität bei einem Klick außerhalb des Modals deaktiviert.

Ich weiß, ich kann eine OnClick-Funktion schreiben, um den ganzen Körper zu überwachen, aber ich frage mich, gibt es eine integrierte Option, die ich verpasse, die Spalte auswählt, wenn ein Benutzer außerhalb der Box klickt?

Answer 1

Die „Spalte“, um eine versteckte Option verwendet das Popup zu zeigen/verstecken - es reine HTML & CSS und vollständig anpassbar ist.

Wenn Sie die aktuelle Einstellung zu ändern, fügen Sie den folgenden (demo):

HTML (fügen Sie nach dem "columnSelectorWrapper")

<div id="columnSelectorOverlay"></div> 

CSS

#columnSelectorOverlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0,0,0,.5); 
    display:none; 
} 

* Anmerkung: Entfernen Sie die Einstellung background: rgba(0,0,0,.5);, wenn Sie das dunkle Overlay nicht möchten.

Dann die folgende Einstellung der .columnSelector Definition hinzufügen:

z-index: 1; 

Dann dieses Javascript

$('#colSelect1').on('change', function() { 
    if (this.checked) { 
    $('#columnSelectorOverlay').show(); 
    } 
}); 

$('#columnSelectorOverlay').click(function() { 
    $('#colSelect1').prop('checked', false); 
    $(this).hide(); 
});