Progettazione di siti Web tabulari con contenuti continuamente aggiunti

Question

Progettazione di siti Web tabulari con contenuti continuamente aggiunti

#1 da (1 voti)
#2 da (0 voti)

1

Attualmente sto lavorando a un sito per un amico, convertendo un foglio google in una pagina web (per ridurre il tempo necessario per modificare i fogli di lavoro e applicarli a tutti gli utenti).

Una pagina particolare è attualmente in un modulo di Google Sheet, poiché lo scopo principale è quello di servire come un modo per "rintracciare" gli utenti. Ci sono molti dati che l'utente può modificare (oltre 500 righe).

Ogni foglio di calcolo è uguale per ogni utente, ma alcuni utenti potrebbero essere più avanti nel processo di completamento.

Una volta che questa pagina è funzionale, voglio che il client sia in grado di entrare e aggiungere più righe alla pagina con la massima facilità possibile. Sono abbastanza tecnici, ma voglio ancora renderlo il più semplice possibile poiché aggiungere più righe si verifica abbastanza frequentemente.

La mia domanda è: Avrebbe più senso fare un grande e aggiungere manualmente gli elementi (hardcode) o far compilare le righe tramite JavaScript?

Esempio di righe codificate:

<tr class="row-minor">
    <td class="col-lg-2 points-col-minor">100</td>
    <td class="col-lg-6 task-col-minor">Complete task 1</td>
    <td class="col-lg-2 hours-minor">5</td>
    <td class="col-lg-2 completed-no">No</td>
</tr>

Potrei copiare e utilizzare questo formato più di 500 volte e far sì che il client lo usi ogni volta che desidera aggiungere nuove righe. Copia e incolla sarebbe abbastanza semplice.

Esempio di JavaScript popolato:

JsonObj = {
    "row": {
        "points": 100,
        "task": "Complete task 1",
        "hours": 5,
        "completed": "no",
    },
}
.
.
.
// code to generate table rows from JsonObj

Genererebbe più di 500 righe ogni volta che l'utente visita questa pagina per essere molto visibile o causare un sacco di latenza della pagina? In media, l'utente visita questa pagina alcune volte al giorno (sessioni lunghe).

Modifica: potrei farlo anche tramite php. Non sono sicuro se questo renderebbe tutto più semplice, però.

Sono propenso a generarli in modo che non ci siano noiosi errori di copia del codice più e più volte e aggiungere cose a un oggetto JSON è molto più facile per il client e molto più leggibile, ma sono curioso di sapere cosa tutti pensano sia "migliore pratica".

Grazie!

html javascript json css

posta kf. 21.04.2017 - 06:56

fonte

2 risposte

Leggi altre domande sui tag html javascript json css

A seconda delle dipendenze Trasferimento dati tra moduli (livelli)

score 1 · Answer 1

Per i dati tabulari in una pagina web, ti suggerisco di provare i Datatables ( link ).

L'ho usato diverse volte per presentare i dati JSON restituiti da un'API (quindi, sto visualizzando lato client). Datatables funziona davvero bene e non avrebbe problemi con diverse centinaia di righe. Ho iniziato a vedere problemi di rendering solo quando ho provato una sorta di test di carico con circa 10.000 righe in una singola lista. Se si passa a una visualizzazione paginata, può gestire facilmente 10.000 righe di dati su blocchi di 500 righe.

L'inizializzazione della tabella espone diverse aree per configurare rapidamente il modo in cui la tabella è presente e funziona.

score 0 · Answer 2

Genera la pagina iniziale sul server. In questo modo la creazione delle righe, non sarà visibile e la pagina caricherà tutte le righe, già create. Quindi il client non avrà bisogno di compilare ed eseguire il codice Javascript, per visualizzare finalmente la tabella.

Dopo che la pagina è stata caricata aggiungi le nuove righe con Javascript, sul lato client, e lascia che gli utenti salvino i loro progressi. Al salvataggio, invia tutte le informazioni al server, controlla le differenze e salvale nel tuo database.

Potresti aggiungere una funzionalità di salvataggio automatico, se le sessioni saranno molto lunghe. Ciò potrebbe essere ottenuto con la ripetizione di una funzione Javascript a determinati intervalli e l'invio di una richiesta AJAX al server o un'API corrispondente.

Se le pagine saranno molto lunghe e si avrà il tempo, una cosa potrebbe essere migliore, invece di inviare tutte le informazioni al server, per essere verificate e per trovare le differenze a riguardo. Traccia solo le modifiche con Javascript e inviali al server da applicare.