2011-08-22 11 views
5

Desidero creare il menu a discesa Vaadin con 2 separatori. Non sono riuscito a trovare un modo per implementarlo, qualcuno può aiutarmi a risolvere questo problema?Combobox Vaadin

Questo è il modo in cui voglio mostrare il mio discesa:

  • Opzione 1
  • Opzione 2
  • ------------;
  • 1 selezionate
  • selezionare 2
  • -----------;
  • gruppo 1

Come posso fare questo?

+0

Creare un widget Vaadin utilizzando il codice casella combinata di Vaadin. È possibile eseguire l'override del punto in cui il contenuto HTML viene filtrato sul lato client e utilizzare il tag br per aggiungere la riga. – MarterJay

risposta

4

Non esiste un modo integrato per aggiungere separatori da selezionare. L'unico modo che posso pensare è aggiungere un elemento con il separatore desiderato come didascalia. Ad esempio se si utilizza la didascalia predefinita (ID articolo) select.addItem("-----"); dovrebbe essere sufficiente. Questo dovrebbe funzionare sia per i ComboBox che per NativeSelects.

3

È possibile implementare un nuovo componente Vaadin incluso il comportamento del client, ma questa non è una soluzione facile. Questa pagina https://vaadin.com/book/-/page/gwt.html di "Libro di Vaadin" e il forum di Vaadin può essere d'aiuto.

Inoltre, creare il proprio componente utilizzando componenti esistenti è un'altra soluzione. È possibile implementare una combobox speciale che accetta i valori degli array String o Component. Il modo per farlo è utilizzare i pannelli, i layout e le finestre di Vaadin con dimensioni e posizioni e ascoltatori di clic.

0

si può sempre fare

{select.addItem ("-----");}

volta Volevo anche un qualcosa fare come questo, ma non c'era modo corretto di farlo con Vaadin. Ho effettivamente creato un widget Vaadin estendendo la casella combinata. Nel widget lato client di Vaadin filtrano il contenuto HTML prima di aggiungere elementi all'elenco. Quindi, usando il codice lato client, ho la precedenza su quella funzionalità e uso il tag HTML "
" per aggiungere la linea.

0
select.addItem("-----"); 

sembra il modo migliore, non so di qualche altro

Btw se si sta leggendo articoli da qualche lista è possibile combinare che con un po 'contatore di articoli e (itemsCount%n)==0 all'operatore di impostare il separatore dopo 'n' articoli inseriti :)

0

È possibile aggiungere l'articolo alla selezionato (come detto prima) e quindi disattivare i separatori con alcuni javascript:

  1. aggiungere l'elemento alla selezione. cb.addItem ("separatore"); cb.setItemCaption ("separator", "-------------");

  2. eseguire il JavaScript

    String finale JavaScript = ""

    • "var seleziona = document.getElementsByTagName ('selezionare');"
    • "for (var j = 0; j < selects.length; j ++) {"
    • "var op = seleziona [j] .getElementsByTagName ('option');"
    • "for (var i = 0; i < op.length; i ++) {"
    • "se (op [i] .text == '" + separatorText + "') op [i] = .disabled vero;"
    • "}}"; Page.getCurrent(). GetJavaScript(). Execute (javascript);