2016-04-14 13 views
1

Ich habe eine HTML-Tabelle mit https://github.com/dobtco/jquery-resizable-columns resize plugin.jquery-resizable-columns refresh nach ng-hide

Ich muss Spalte ausblenden Funktionalität hinzufügen, so habe ich ng-hide Direktiven zu den Spalten mit Doppelklick-Ereignis auf jedem Spaltenkopf hinzugefügt, um ausblenden Flag auf True und eine Schaltfläche "Alle anzeigen", um alle Flags auf falsch zu wechseln.

Problem: nach dem Ausblenden einer Spalte bleiben die Größenänderungsfunktionen intakt. Wenn ich auf eines von ihnen klicke, werden sie aktualisiert und an die richtigen Stellen verschoben.

Wie kann ich die Aktualisierung von Handlern erzwingen, nachdem eine Spalte ausgeblendet wurde?

Beispiel: http://plnkr.co/edit/balnDZPWqVP5y0Mx7mhT?p=preview

+0

Ich verstehe nicht, was das Problem ist, die PLNKR scheint ziemlich gut zu funktionieren, nicht? Können Sie das genaue Problem genauer erläutern? – fikkatra

+0

Wenn Sie dieses Beispiel starten, haben Sie eine Tabelle mit 5 Spalten. Wenn Sie den Mauszeiger über ein Spaltentrennzeichen bewegen, sehen Sie, wie sich der Cursor ändert. Doppelklicken Sie nun auf eine Spalte - sie sollte sich verstecken. Versuchen Sie, die Maus über eine beliebige Spalte zwischen den Spalten zu bewegen, um zu sehen, ob sie sich ändert. Wenn Sie den Cursor leicht zur Seite bewegen, können Sie sehen, dass er sich irgendwo ändert. Hier wird der Größenänderungs-Handler nach dem Ausblenden einer Spalte angezeigt. – Ingvarr

Antwort

0

können Sie verwenden

$('#tab').resizableColumns('syncHandleWidths') 

Dies wird die Spaltengrößen aktualisieren. Der Trick besteht darin, diese Methode nach aufzurufen das DOM wurde neu geladen. Andernfalls ist die Spalte noch nicht aus dem DOM verschwunden und die Spaltengrößen sind nicht korrekt. Dies ist, wo der Winkel $timeout Service praktisch ist (nicht vergessen, es zu injizieren):

$timeout(function(){$('#tab').resizableColumns('syncHandleWidths');}); 

Gespaltene plunkr here.

+0

Danke! Klappt wunderbar! – Ingvarr