Migliore alternativa ad avere un modulo html con input selezionati su ogni riga della tabella

Question

Migliore alternativa ad avere un modulo html con input selezionati su ogni riga della tabella

#1 da (0 voti)

0

Ho un'applicazione web (laravel) con una pagina che presenta un numero elevato di righe (transazioni finanziarie) in una tabella HTML. Su ogni riga voglio avere un menu a discesa (seleziona input) che consente all'utente di assegnare una categoria alla transazione.

Qual è l'approccio migliore per consentire all'utente di selezionare / assegnare queste categorie, senza creare una pagina che sarà molto lenta da utilizzare sui dispositivi mobili?

Ecco cosa ho provato:

Inizialmente ho creato un singolo modulo che contiene l'intera tabella, con un input di selezione su ogni riga con un ID univoco. Questo sembra abbastanza lento e "pesante" e richiede di inviare ed elaborare l'intero modulo anche se si cambia semplicemente una singola riga.

In alternativa ho creato un modulo su ogni riga, in questo modo posso inviarlo automaticamente quando apporta una modifica nella casella di selezione, che è più carina, ma è ancora molto lento a rendere così tante caselle di selezione, specialmente se si utilizza select2 per modificarli.

Posso provare a sfogliare i dati in modo più aggressivo, ma mi chiedo se esiste un approccio di base migliore?

Mi viene in mente che potrei creare il modulo una volta, nascosto, e solo visualizzarlo sul posto nella riga che viene modificata in qualche modo usando javascript (o sostituire la casella di selezione per il testo statico o mostrarlo sotto sarebbe ok anche a me. non sono sicuro che il modo migliore per andare su questo, o anche se questa è la migliore pratica per questo tipo di situazione ?? / p>

In che modo gli altri si avvicinerebbero a questo? Forma singola, forma per riga / cella modificabile, forma dinamica sostituita in posizione ecc.? Suppongo che non sto cercando le cose giuste, ma sto avendo problemi a stabilire le migliori pratiche attuali per questo genere di cose.

Sto usando php, laravel 5.4, jquery, bootstrap3 per la pagina.

html html5 web-development javascript laravel

posta madz 20.11.2017 - 11:27

fonte

1 risposta

Leggi altre domande sui tag html html5 web-development javascript laravel

WebApp Design: un modo migliore di aggiornare le informazioni in un elemento DOM Modo rapido per verificare se esiste un percorso nel digraph

score 0 · Accepted Answer

Puoi utilizzare DataTable

Nell'esempio puoi vedere come funziona il controllo positivo

$('#example tbody').on( 'click', 'tr td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = dt.row( tr );
    var idx = $.inArray( tr.attr('id'), detailRows );

    if ( row.child.isShown() ) {
        tr.removeClass( 'details' );
        row.child.hide();

        // Remove from the 'open' array
        detailRows.splice( idx, 1 );
    }
    else {
        tr.addClass( 'details' );
        row.child( format( row.data() ) ).show();

        // Add to the 'open' array
        if ( idx === -1 ) {
            detailRows.push( tr.attr('id') );
        }
    }
} );

Avrai bisogno della funzione format() per generare e restituire un modulo HTML usando i dati forniti attraverso l'argomento

Questo approccio istanzia un modulo per ogni riga solo quando quella riga è espansa

Ovviamente dovrai distruggere il tavolo quando la riga viene chiusa

C'è un gran numero di funzionalità e DataTable è molto flessibile. Lo raccomando perché ritengo che risolverà anche il tuo altro problema, ad esempio il caricamento e il rendering di molti dati in modo sfalsato