Page tree
Skip to end of metadata
Go to start of metadata

 

Das Plugin verarbeitet Daten, welche mit einem Feldtrenner geliefert werden und baut daraus Collections zum Rendern Multipler Filtermöglichkeiten über x Zeilen. In Version 0.0.1 ist die Struktur fest an ein HTML <select> gebunden.

Eine Methode zur Unterstützung von JSON Daten ist als Beispiel vorbereitet. (not implemented).

 

Historie

 VersionÄnderungenAnmerkungen
 0.0.1 Erstumsetzung

ALEJS-145 - Getting issue details... STATUS

0.1.0  

ALEJS-146 - Getting issue details... STATUS

0.1.1

Bugfix

  • Zugriff auf das Dataset wenn es leer ist wurde abgefangen
 
 0.1.7Aktueller Versionsstand - Erweiterung Feature Dataset 

Abhängigkeiten

Frameworks  & Plugins
jQuery> 3.1.1
AlvineFramework>= 1.0.0 

Installation

Das Plugin sowie das AlvineFramework kann vom Alvine-CDN geladen werden.

//cdn.alvine.io/libs/alvine/framework/alvine.framework-1.10.0.min.js
//cdn.alvine.io/libs/alvine/mapselection/jquery.alvinemapselection-0.1.7.min.js

Bibliotheken

<script src="https://cdn.alvine.io/libs/alvine/framework/alvine.framework-1.10.0.min.js"></script>
<script src="https://cdn.alvine.io/libs/alvine/mapselection/jquery.alvinemapselection-0.1.7.min.js"></script>


Konfigurieren

Über die angebenen Parameter kann das Plugin konfiguriert werden. Die Werte können entweder per Script, als Json im Tag oder als einzelne data-Attribute (data-) im Tag notiert werden.

<select id="comp1" data-alvinemapselection-targetselector="#outputSelectionMap" 
data-alvinemapselection-templateselector="#templateSelectionMap" 
data-alvinemapselection-loaderselector=".mapLoader" 
data-alvinemapselection-result="#variantSelect" 
data-alvinemapselection-initValue="#FIELD:IID#"  class="alvinePlugin_MapSelection" >

Parameter

Die Parameter werden idR. über Dataattribute überschrieben (siehe oben). Der Prefix ist immer "data-MapSelectionPlugin-"

SchlüsselTypeBeschreibungStandardwert
seperatorStringTrennzeichen zwichen den definierten Key-Value Werten. Der Key Value ist immer mit einem ":" getrennt und kann nicht überschrieben werden.|
targetselectorStringZiel HTML ID zum Output der MapSelection 
buttonelementclassStringKlassenname für die "Button" Elemente der MapbuttonMapSelection
buttonavailableclassStringKlassenname welcher gesetzt wird (im buttonElement) wenn die Auswahl in der Map verfügbar istbtn-primary
buttonnotavailableclassStringKlassenname welcher gesetzt wird (im buttonElement) wenn die Auswahl in der Map nicht verfügbar istbtn-secondary
buttonselectedclassStringKlassenname welcher gesetzt wird (im buttonElement) wenn die Auswahl in der Map selektiert ist.active
rowclassStringKlassenname für eine Map-RowalvinePluginMapSelectionRow
dataSourceTypeStringdatentyp zur Generierung der Map (HTML ist aktuell an ein <select><option> Tag gebunden). JSON ist vorbereitet aber noch nicht implementiert in Version 0.0.1html
initvalueStringInit Wert zum vor-initialisieren einer MapAuswahl 
resulteventStringEvent, welches auf "result" bei erfolgreichem Mapping getriggert wird.change
loaderselectorStringID/Klasse Loader Div. Wird eingeblendet wenn resultEvent getriggert wird. 

Methode

HandlerBeschreibungParameter

HTML-Template

Im folgenden Beispiel wird eine Map entsprechend der Vorgaben aus dem Select-Tag erstellt. Dabei werden einige Defaultwerte aus dem Plugin überschrieben (Siehe oben Parameter)

<select id="comp1" 
data-alvinemapselection-targetselector="#outputSelectionMap" 
data-alvinemapselection-templateselector="#templateSelectionMap" 
data-alvinemapselection-loaderselector=".mapLoader" 
data-alvinemapselection-result="#variantSelect" 
data-alvinemapselection-initValue="#FIELD:IID#"
class="alvineMapSelection" >
	<option value="12231" data-key="Länge:80mm|Gewinde:M8|Spannbereich:15mm-55mm" >12231</option>
    <option value="12232" data-key="Länge:90mm|Gewinde:M8|Spannbereich:15mm-55mm" >12232</option>
    <option value="12233" data-key="Länge:100mm|Gewinde:M8|Spannbereich:30mm-60mm" >12233</option>
    <option value="12234" data-key="Länge:110mm|Gewinde:M8|Spannbereich:30mm-60mm" >12234</option>
    <option value="12235" data-key="Länge:120mm|Gewinde:M12|Spannbereich:30mm-60mm" >12235</option>
    <option value="12236" data-key="Länge:130mm|Gewinde:M12|Spannbereich:70mm-120mm" >12226</option>
</select>
           
<div id="output"></div>
<input id="iidresult" type="text" value="" />

<template id="templateSelectionMap">
            <div class="mapLoader"><span class="fa fa-refresh fa-spin"></span></div>
            <div>
                <div class="row alvineMapSelectionRow" data-repeat="feature dataset:features" data-bind="true">
                    <div class="col-xs-12">
                        <h3 data-replace="dataset:feature | index:name">Name</h3>
                    </div>
                    <div>
                        <div class="col-xs-6 m-y" data-repeat="featuredata dataset:feature | index:list"  >
                            <div data-bind="true" data-attributes="data-alvinemapselection-listid dataset:featuredata|index:listid,data-alvinemapselection-datasetid dataset:featuredata|index:datasetid,class dataset:featuredata|call:getButtonClass, value dataset:featuredata | index:name, data-alvinemapselection-iidmap dataset:featuredata | index:iidcollection" >
                                <span data-replace="dataset:featuredata | index:name" ></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</template>


  • No labels