Η δυνατότητα Διάταξης Πλέγματος σάς επιτρέπει να τακτοποιείτε ερωτήσεις σε πλέγμα πολλαπλών στηλών μέσα σε ομάδα, χρησιμοποιώντας την ετικέτα εμφάνισης gridformat<>. Αυτό είναι χρήσιμο για πυκνές φόρμες εισαγωγής δεδομένων όπου πολλά σχετικά πεδία πρέπει να εμφανίζονται πλάι-πλάι αντί για κατακόρυφη στοίβαξη.

Πώς λειτουργεί

Η διάταξη πλέγματος εφαρμόζεται σε δύο επίπεδα:

  1. Η ομάδα — ορίστε appearance: field-list grid(weight=N) για να καθορίσετε πόσες στήλες έχει το πλέγμα
  2. Κάθε πεδίο μέσα στην ομάδα — ορίστε appearance: gridformat<row=R col=C colspan=S/> για τοποθέτηση του πεδίου

Το πλέγμα χρησιμοποιεί σύστημα 12 στηλών τύπου Bootstrap. Το weight=N καθορίζει πόσες λογικές στήλες έχει το πλέγμα σας· κάθε στήλη καταλαμβάνει 12/N στήλες Bootstrap.

Εμφάνιση επιπέδου ομάδας

ΕμφάνισηΠεριγραφή
field-list grid(weight=2)Πλέγμα 2 στηλών (κάθε στήλη = 6 στήλες Bootstrap)
field-list grid(weight=3)Πλέγμα 3 στηλών (κάθε στήλη = 4 στήλες Bootstrap)
field-list grid(weight=4)Πλέγμα 4 στηλών (κάθε στήλη = 3 στήλες Bootstrap)
field-list grid(weight=6)Πλέγμα 6 στηλών (κάθε στήλη = 2 στήλες Bootstrap)

Σύνταξη gridformat<> σε επίπεδο πεδίου 

  gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=COLOR/>
ΧαρακτηριστικόΠεριγραφή
rowΑριθμός γραμμής (με βάση το 1)
colΑριθμός στήλης (με βάση το 1, εντός του πλέγματος που ορίζεται από weight)
colspanΑριθμός στηλών που καλύπτει αυτό το πεδίο (προεπιλογή 1)
backgroundcolorΠροαιρετικό χρώμα CSS για το φόντο πεδίου (π.χ. #f0f0f0, lightblue)

Παράδειγμα: Ενότητα έρευνας νοικοκυριού 2 στηλών

typenamelabelappearance
begin_groupdemographicsΔημογραφικάfield-list grid(weight=2)
textfirst_nameΌνομαgridformat<row=1 col=1/>
textlast_nameΕπώνυμοgridformat<row=1 col=2/>
integerageΗλικίαgridformat<row=2 col=1/>
select_one gendergenderΦύλοgridformat<row=2 col=2/>
textaddressΠλήρης διεύθυνσηgridformat<row=3 col=1 colspan=2/>
end_group

Αποδίδεται ως:

  [ Όνομα              ] [ Επώνυμο             ]
[ Ηλικία             ] [ Φύλο                ]
[ Πλήρης διεύθυνση (καλύπτει και τις δύο στήλες) ]

Παράδειγμα: Εισαγωγή δεδομένων αγροτεμαχίου 3 στηλών

typenamelabelappearance
begin_groupplot_dataΣτοιχεία αγροτεμαχίουfield-list grid(weight=3)
textplot_idID αγροτεμαχίουgridformat<row=1 col=1/>
decimalarea_haΈκταση (εκτάρια)gridformat<row=1 col=2/>
select_one crop_typecropΤύπος καλλιέργειαςgridformat<row=1 col=3/>
decimalyieldΑπόδοση (kg)gridformat<row=2 col=1/>
decimalrevenueΈσοδαgridformat<row=2 col=2/>
textnotesΣημειώσειςgridformat<row=2 col=3/>
end_group

Χρώματα φόντου

Χρησιμοποιήστε backgroundcolor για οπτική διάκριση ενοτήτων:

typenamelabelappearance
notesection_aΕνότητα Αgridformat<row=1 col=1 colspan=2 backgroundcolor=#e8f4f8/>

Βέλτιστες πρακτικές

  1. Χρησιμοποιείτε διάταξη πλέγματος μόνο για οθόνες εντατικής εισαγωγής δεδομένων όπου τα πεδία πλάι-πλάι πραγματικά μειώνουν την κύλιση.
  2. Διατηρείτε σύντομα τα πεδία colspan=1 (ID, κωδικοί, σύντομες επιλογές) — οι πλατιές ετικέτες κόβονται άσχημα σε στενές στήλες πλέγματος.
  3. Χρησιμοποιείτε colspan=N για πεδία με μεγάλες ετικέτες ή εισόδους κειμένου πολλαπλών γραμμών.
  4. Δοκιμάστε στο μικρότερο μέγεθος οθόνης που αναμένετε να χρησιμοποιούν οι απογραφείς — ένα πλέγμα 4 στηλών είναι στριμωγμένο σε τηλέφωνο.
  5. Η διάταξη πλέγματος λειτουργεί καλύτερα σε φόρμες web και tablet· σε κινητά τηλέφωνα το πλέγμα 2 στηλών είναι συνήθως το μέγιστο άνετο πλάτος.

Περιορισμοί

  • Το gridformat<> λειτουργεί μόνο μέσα σε ομάδα με εμφάνιση grid(weight=N) — δεν έχει αποτέλεσμα στο ανώτατο επίπεδο.
  • Η διάταξη πλέγματος είναι επέκταση φόρμας web rtSurvey και ενδέχεται να μην αποδίδεται σωστά σε άλλους πελάτες συμβατούς με ODK.
  • Η τοποθέτηση γραμμής και στήλης δεν επικυρώνεται κατά τη δημιουργία φόρμας — επικαλυπτόμενα πεδία θα αποδοθούν και τα δύο αλλά ενδέχεται να φαίνονται σπασμένα.
Ήταν χρήσιμη αυτή η σελίδα;