- Πολλαπλή επιλογή
🧬 Συγκεντρώστε τα συστατικά
Πολλαπλή επιλογή
ContributeΠολλαπλή επιλογή
Το στοιχείο πολλαπλών επιλογών μπορεί να είναι χρήσιμο σε καταστάσεις όπου πρέπει να επιλεγούν πολλαπλές επιλογές από μια λίστα. Αυτό μπορεί να επιτρέψει την αποτελεσματικότερη είσοδο και φιλτράρισμα δεδομένων. Το εξάρτημα μπορεί να ρυθμιστεί με διάφορες ιδιότητες για να επιτύχει διαφορετικά αποτελέσματα και επίσης υποστηρίζει μεθόδους και χειριστές γεγονότων για περισσότερη προσαρμογή.
Μπορείτε να προσθέσετε επιλογές χειροκίνητα ή μαζικά από την πηγή δεδομένων σας. Σε αυτό το άρθρο, θα εισαγάγουμε λεπτομερώς πώς να χρησιμοποιήσετε το στοιχείο πολλαπλών επιλογών.
Ιδιότητες
Χειροκίνητες επιλογές
Προσθέστε νέες επιλογές ή διαγράψτε χειροκίνητα και ρυθμίστε τις επιλογές μία προς μία. Οι ιδιότητες των επιλογών είναι οι εξής:
| Ιδιότητες | Περιγραφή |
|---|---|
| Ετικέτα | Το κείμενο που εμφανίζεται για την επιλογή |
| Τιμή | Η τιμή που σχετίζεται με την επιλογή |
| Απενεργοποιημένο | Αν η επιλογή είναι απενεργοποιημένη για την επιλογή |
Αντιστοιχισμένες επιλογές
Μπορείτε επίσης να προσθέσετε επιλογές από μια πηγή δεδομένων με τη χαρτογράφηση των ιδιοτήτων της ετικέτας και της τιμής στα αντίστοιχα πεδία δεδομένων. Μπορείτε να πάρετε επιλογές δυναμικά από τη βάση δεδομένων με αυτόν τον τρόπο. Στο τέλος αυτού του άρθρου, θα δείξουμε πώς να το χρησιμοποιήσουμε μέσω ενός παραδείγματος.
| Ιδιότητες | Περιγραφή |
|---|---|
| Πηγή δεδομένων | Ορίστε την πηγή δεδομένων των επιλογών |
| Ετικέτα | Χρησιμοποιήστε {{item}} για να ορίσετε την ετικέτα των επιλογών |
| Τιμή | Χρησιμοποιήστε {{item}} για να ορίσετε την τιμή των επιλογών |
| Απενεργοποιημένο | Χρησιμοποιήστε {{item}} για να ορίσετε αν η επιλογή είναι απενεργοποιημένη για την επιλογή |
Άλλες ιδιότητες
| Ιδιότητες | Περιγραφή |
|---|---|
| Προεπιλεγμένη τιμή | Η αρχική τιμή του εξαρτήματος. Μπορείτε να αλλάξετε δυναμικά την αρχική τιμή πληκτρολογώντας JavaScript στην {{}}. |
| Υποκατάστατο | Η τιμή θα εμφανίζεται όταν το πεδίο εισαγωγής είναι κενό. |
| Ετικέτα | Το όνομα του πεδίου που εμφανίζεται στο χρήστη |
| Λεζάντα | Μια λεζάντα που χρησιμοποιείται για να περιγράψει λεπτομερώς το πεδίο |
| Κρυφή ετικέτα | Ορίστε αν θα εμφανίζεται η ετικέτα |
| Θέση | Ορίστε τη θέση της ετικέτας σε σχέση με το στοιχείο |
| Ευθυγράμμιση | Ορίστε την ευθυγράμμιση της ετικέτας |
| Width | Όταν η ετικέτα βρίσκεται στην αριστερή πλευρά του εξαρτήματος, ορίστε τον λόγο πλάτους της ετικέτας |
| Χειριστής Συμβάντων | Ερωτήματα ενεργοποίησης, έλεγχος εφαρμογών, ή κλήση άλλων API σε απόκριση σε συμβάντα εφαρμογής. |
| Απενεργοποιημένο | Ελέγξτε την κατάσταση του αν το στοιχείο είναι απενεργοποιημένο. Το στοιχείο δεν μπορεί να τροποποιηθεί ή να εστιαστεί όταν είναι απενεργοποιημένο. |
| Μόνο Για Ανάγνωση | Ελέγξτε την κατάσταση του αν το στοιχείο είναι μόνο για ανάγνωση. Ένα στοιχείο μόνο για ανάγνωση μπορεί να επιλεγεί και να εστιασθεί, αλλά δεν μπορεί να τροποποιηθεί. |
| Εμφάνιση κουμπιού καθαρισμού | Ορίστε αν θα εμφανίζεται το κουμπί εκκαθάρισης |
| Υπόδειξη | Οι χρήστες μπορούν να εισάγουν εδώ την υπόδειξη συστατικού. Η υπόδειξη θα εμφανίζεται όταν εστιάζεται. Υποστηρίζεται μορφή Markdown |
| Απαιτούμενο πεδίο | Ισχύει μόνο όταν ο διακόπτης είναι ενεργοποιημένος. |
| Επιλέξτε τουλάχιστον | Ορίστε τον ελάχιστο αριθμό επιλογών για να επιλέξετε |
| Επιλογή μέχρι | Ορίστε τον μέγιστο αριθμό επιλογών για να επιλέξετε |
| Προσαρμοσμένοι κανόνες | editor.inspect.setter_tooltip.custom_rule |
| Απόκρυψη μηνύματος επικύρωσης | Μπορείτε να αποκρύψετε το μήνυμα σφάλματος αλλάζοντας την κρυφή κατάσταση όταν η τιμή εισόδου είναι εσφαλμένη. Μπορείτε να αλλάξετε δυναμικά την κρυφή κατάσταση από JavaScript. |
| Πλήκτρο Δεδομένων Φόρμας | Καθορίστε ένα κλειδί ενός στοιχείου φόρμας περιτυλίγματος κατά την κατασκευή του χαρακτηριστικού δεδομένων. |
| Ύψος | Πώς να ρυθμίσετε το ύψος για να χωρέσει |
| Hidden | Δυναμική ρύθμιση της απόκρυψης του συστατικού. Μπορείτε να αλλάξετε την κρυφή κατάσταση μέσω της δυναμικής δυαδικής τιμής. |
| Χρώμα θέματος | Για να επιλέξετε το χρώμα του θέματος του στοιχείου |
Μέθοδος
Μπορείτε να χρησιμοποιήσετε άλλα στοιχεία για τον έλεγχο της εφαρμογής. Υποστηρίζουμε τις ακόλουθες τρεις μεθόδους:
ορισμόςΤιμή
Για να ορίσετε την επιλεγμένη επιλογή, για παράδειγμα, {{[”value1”,”value3”…]}}
| Ιδιότητες | Περιγραφή |
|---|---|
| Τιμή | Ένας πίνακας επιλεγμένων τιμών επιλογών. |
εκκαθάρισηΤιμή
Για να καθαρίσετε τις επιλεγμένες επιλογές
validate
Για να επιβεβαιωθεί ότι οι πληροφορίες εισόδου είναι νόμιμες
clearValidate
Για να καθαρίσετε το μήνυμα επικύρωσης
Χειριστής συμβάντων
Υποστηρίζουμε την ακρόαση του onΑλλαγή συμβάντος του στοιχείου πολλαπλών επιλογών.
Δεδομένα
Το εξάρτημα πολλαπλών επιλογών έχει κάποια κοινώς χρησιμοποιούμενα δεδομένα, τα οποία μπορούν να κληθούν μέσω {{componentName.propertyName}} στην εφαρμογή.
| Όνομα ιδιότητας | Περιγραφή |
|---|---|
| τιμή | ένας πίνακας με επιλεγμένες τιμές επιλογών |
Περίπτωση χρήσης
Στη συνέχεια, θα δείξουμε πώς να χρησιμοποιήσετε το χαρτογραφημένο τρόπο για να αποκτήσετε δυναμικά επιλογές.
Βήμα 1 Προσθέστε μια ενέργεια
Έχουμε δημιουργήσει έναν πίνακα με το όνομα selection, που περιλαμβάνει 5 στήλες: options_en, options_jp, options_zh, options_kr, value. Αποθηκεύσαμε τις τιμές επιλογών σε value και τις αποθηκευμένες ετικέτες επιλογών σε διαφορετικές γλώσσες σε άλλες στήλες.
Δημιουργήστε μια ενέργεια για να εμφανίσετε όλα τα δεδομένα στο selection με όνομα postgresql1
επιλέξτε * από την επιλογήΒήμα 2 Διαμόρφωση του στοιχείου πολλαπλών επιλογών
Ορίστε τις πηγές δεδομένων σε
{{postgresql1.data}}Ρυθμίστε την ετικέτα για να αλλάξετε την ετικέτα με βάση τη γλώσσα.
- Χρησιμοποιήστε {{ item.columnName }} για να ορίσετε τη στήλη.
- Χρησιμοποιήστε {{ currentUserInfo.language }} για να ορίσετε τη χρήση της γλώσσας από το ILLA.
{currentUserInfo.language=='ja-JP' ? item.options_jp : currentUserInfo.language == 'ko-KR' ? item.options_kr : currentUserInfo.language == 'zh-CN' ? item.options_zh : item.options_en }}
Τι περισσότερο
Μπορείτε να προσθέσετε ή να διαγράψετε επιλογές προσθέτοντας ή διαγράφοντας γραμμές στον πίνακα επιλογών.