Valikot (select2)
Oletusvalikko
oletusvalikko: <select> jolla luokka select2-e
- jos valintoja alle 20 ei näytetä hakua
- leveys oletuksena 100%
HTML
<select class="select2-e"> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select>
Eduplan GUIn oletusinitialisointi
Eduplan GUI oletus select2-initialisointi
$(".select2-e").select2({ minimumResultsForSearch: 20, width: "100%" });
Oletusmonivalinta
- <select> jolla luokka selec2-e ja attribuutti multiple
Monivalinta
<select class="select2-e" multiple> <option value="1">Red</option> <option value="2">Blue</option> <option value="3">Green</option> </select>
Ajax-valikko
- ajaxia käyttävät select2-elementit luodaan AINA hidden inputille
<input id="remote" type="hidden" /> <!-- jolloin javascript voisi olla esim --> egselect("#remote", { placeholder: "Select" } , { url: 'url' });
- haun tulee palauttaa jsonia
id = arvo joka halutaan tallentaa
text = teksti, joka näytetään käyttäjälle
esim. hakusanalla gr palautuu Eduplan GUI esimerkissä seuraavanlainen json
[{"id":"green","text":"Green"},{"id":"grey","text":"Grey"}]
jolloin valikko näyttää tältä
Esivalinta
- select
- optionille normaalisti attribuutti selected
- input hidden
- valueksi json muodossa halutut valinnat (JSON saman muotoista kuin haettaessa), esim:
<input id="remote-prefill" type="hidden" value='[{"id":"green","text":"Green"}, {"id":"black","text":"Black"}]'/>
- valueksi json muodossa halutut valinnat (JSON saman muotoista kuin haettaessa), esim:
egselect(elem, opts, ajax)
Pakollinen | Parametri | Oletus | Huom |
---|---|---|---|
elem | - | elementin luokka tai id stringinä, vaatii myös . tai # eli jos luokka on test annetaan parametriksi ".test" ja vastaavasti id "#test" | |
opts | { | voidaan antaa select2 parametrejä vapaasti ja yliajaa oletukset | |
ajax | ei käytetä, jos parametria ei annettu, muuten oletus: { url: "parametrissa annettu url", dataType: "jsonp", data : function (term, page) { return { term: term, page: page } }, results: function (data, page) { return { results: data }; } }
| jos halutaan tehdä ajax-haku, minimivaatimus tälle parametrille on { url : '/polku/urliin/joka/palauttaa/jsonia' } mikäli halutaan jollakin tavalla monimutkaisempia hakuja tai halutaan palauttaa muunmuotoisia dataa tmv, tehdään joko oma select2-init dokumentaation mukaisesti tai jos tarpeeksi geneerinen ja usein tarvittu tapa tehdä, voidaan lisätä ominaisuus egselectiin -> luo issue |