Valikot (select2)
Oletusvalikko
oletusvalikko: <select> jolla luokka select2-e
- jos valintoja alle 20 ei näytetä hakua
- leveys oletuksena 100%
Code Block |
---|
language | html/xml |
---|
title | HTML |
---|
|
<select class="select2-e">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select> |
Eduplan GUIn oletusinitialisointi
Code Block |
---|
language | javascript |
---|
title | Eduplan GUI oletus select2-initialisointi |
---|
|
$(".select2-e").select2({
minimumResultsForSearch: 20,
width: "100%"
}); |
Oletusmonivalinta
- <select> jolla luokka selec2-e ja attribuutti multiple
Code Block |
---|
|
<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
Code Block |
---|
|
<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
Code Block |
---|
|
[{"id":"green","text":"Green"},{"id":"grey","text":"Grey"}] |
jolloin valikko näyttää tältä
Image Added
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"}]'/>
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 | { minimumResultsForSearch: 10, width:"100%" } | 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 |