Come si duplica la funzionalità "blocco dei riquadri" su una tabella HTML?

Question

Ho un widget in un progetto ASP.NET che sto sviluppando per il mio lavoro. Deve essere largo 300 pixel e non può essere più ampio. Sfortunatamente ciò che vogliono è risultato essere abbastanza complicato per un widget così piccolo. Ecco quello che ho in questo momento:

http://www.codetunnel.com/content/images/widget/currentWidget.jpg

Come si può vedere, si tratta di un controllo della fisarmonica jQuery UI. Man mano che ogni pannello di fisarmonica si espande, viene effettuata una chiamata ajax per caricare i suoi contenuti in modo asincrono. In questo momento sputa una tabella HTML contenente i dati desiderati. Il tavolo è all'interno di un DIV con stile overflow: auto; in modo da ottenere barre di scorrimento in basso e a destra.

Il mio problema è che voglio alcune funzionalità piuttosto personalizzate (come l'abilità del riquadro di blocco in Excel). Quando si scorre a sinistra ea destra, voglio tutte le righe, inclusa l'intestazione, per scorrere a sinistra e a destra, eccetto per la colonna più a sinistra, "nome prodotto". Come questo:

http://www.codetunnel.com/content/images/widget/scrollRight.jpg

Quando lo scorrimento su e giù voglio tutte le colonne, tra cui la colonna di sinistra, per scorrere su e giù tranne per la riga di intestazione. Come questo:

http://www.codetunnel.com/content/images/widget/scrollDown.jpg

Qual è il modo migliore per ottenere questa funzionalità? O c'è un modo?

Answer 1

Ho creato qualcosa di simile, ma molto meno complesso: volevo che la prima riga della tabella (le intestazioni) venisse congelata mentre le righe di dati scorrevano verticalmente. L'ho implementato come 2 tabelle diverse, ciascuna con celle a larghezza fissa, ciascuna nel proprio DIV. Il div "header" era semplicemente statico e il div "body" utilizzato overflow: auto per scorrere.

Il tuo problema è più complesso, perché vuoi "bloccare i riquadri" su entrambi gli assi e supportare lo scorrimento su entrambi gli assi affatto). Tuttavia, mi chiedo se si potrebbe cominciare da quella posizione e lavorare da lì ...

Definire 4 div:

• NW: questo non scorre affatto, mai. È la cella "nome prodotto" nell'esempio
• NE: questa scorre solo orizzontalmente. È la riga superiore/di intestazione nell'esempio
• SW: questo scorre solo verticalmente. È la colonna sul lato sinistro nell'esempio
• SE: questo scorre entrambe le direzioni. È la griglia dati principale nell'esempio

Con 4 DIV, avresti a che fare con 4 tabelle distinte, quindi dovremo tenere sincronizzate le loro celle e altezze delle celle. Idealmente potremmo farlo a tempo di rendering, se possiamo renderli valori fissi. Altrimenti, potremmo essere in grado di scrivere qualche jquery/JS sul lato client per iterare le celle nella tabella SE quando la pagina viene caricata (o ridimensionata) e forzare la dimensione delle altre tabelle in modo che corrispondano.

Con 4 DIV, dobbiamo anche sincronizzare lo scorrimento: quando SE scorre in orizzontale, NE deve scorrere nella stessa posizione. Quando SE scorre verticalmente, il SW deve scorrere nella stessa posizione. Sospetto che ci siano alcuni eventi di scorrimento sul lato client che possiamo collegare, per rilevare quando si scorre SE.All'interno di questi eventi, dovremmo essere in grado di forzare NE e/o SW a scorrere nello stesso modo.

Spiacente, questa è una risposta così vaga/astratta. Il fatto di implementare qualcosa del genere richiederà più tempo di quello che potrei comodamente rubare dal mio lavoro principale. Ma questa è una cosa che mi sta scuotendo nel cervello, quindi ho pensato di condividerlo con te. Spero che ti porti almeno un po 'più vicino a una soluzione. Saluti!

Answer 2

È qualcosa che tbody può risolvere all'interno di una tabella di dimensioni fisse? Sembra che tu possa mettere overflow:auto sul tbody.