Ultimo messaggio

JoeRuspante

il 26 agosto 2011 alle 02:44

365 messaggi dal 08 febbraio 2009

Salve a tutti.

Sto provando ad utilizzare JQuery per creare dinamicamente una griglia e poi renderne "ridimensionabili" le colonne.

Il codice di suo sono riuscito a scriverlo, però non riesco a trovare l'ordine in cui inserire le istruzioni per farlo funzionare.

Nel mio script ho qualcosa del genere:


$(function() {
    creaGriglia();
    $(".resizable").resizable();
});

function creaGriglia() {
   // Codice per creare la griglia
   var mioHtml = "<table>....</table>;
   $("#myTable").html(mioHtml);
};

Nella griglia inserisco delle celle con lo stile css uguale a "resizable". Pertanto la chiamata eseguita subito dopo la "creaGriglia()" dovrebbe trovarla.

In realtà non trova nulla.

Ho fatto quindi un test mettendo un "alert" prima della chiamata a "resizable"... In quel momento la griglia a video non si vede.

Ho pertanto aggiunto un pulsante a fondo pagina (solo per fare un test) nel cui evento di click ho riportato solo il codice:


$(".resizable").resizable();

Premendo il pulsante tutto funziona bene.

Dai test sembra quindi che il DOM della tabella non venga creato nel momento in cui eseguo la chiamata a $("#myTable").html() ma quando finisce l'evento "ready" del document.

Qualcuno mi saprebbe aiutare?
Grazie mille!

Rispondi Quoting

teo prome

il 26 agosto 2011 alle 09:28

531 messaggi dal 13 novembre 2008
Contributi
www.whereabouts.it

devi verificare che la table sia effettivamente presente

$(document).ready(function () {

var miohtml = "<table id='myTable' style='width:300px;height:300px;'><tr><td class='resizable' style='border:1px solid #000000;height:50px;'></td><td class='resizable' style='border:1px solid #000000;height:50px;'></td><td class='resizable' style='border:1px solid #000000;height:50px;'></td></tr></table>";

$("#myDiv").append(miohtml);

$("#myTable").load($(".resizable").resizable());

});

....

<div id="myDiv">
</div>

Rispondi Quoting

JoeRuspante

il 26 agosto 2011 alle 23:11

365 messaggi dal 08 febbraio 2009

Grazie mille! Non sapevo si potesse usare il metodo "load" anche in questo modo (sulla table ed immediatamente dopo averne impostato l'html da codice).

Funziona come volevo

Rispondi Quoting

JoeRuspante

l'1 settembre 2011 alle 02:11

365 messaggi dal 08 febbraio 2009

Ho fatto qualche prova ulteriore e... Mi sono purtroppo accorto che non funziona proprio nel modo che volevo.

In pratica, così com'è impostata la griglia (vedi esempio che mi è stato postato), le colonne sono ridimensionabili, però la griglia resta di dimensioni fisse, per cui se ho due colonne, come restringo la prima mi si allarga la seconda e viceversa.

Io invece vorrei che tutte le colonne rimanessero della stessa dimensione, esclusa quella che sto modificando (quindi modificare il "width" della griglia per intenderci)...

Qualcuno sa dirmi come posso fare?

Rispondi Quoting

teo prome

l'1 settembre 2011 alle 07:59

531 messaggi dal 13 novembre 2008
Contributi
www.whereabouts.it

la table resta di larghezza fissa solo perchè nell'esempio ho messo

<table id='myTable' style='width:300px

basta che lo levi...

al limite potresti impostare una larghezza per le celle, in modo che al caricamento, anche in assenza di dato, siano ben distinte , fai delle prove

Rispondi Quoting

JoeRuspante

l'1 settembre 2011 alle 11:50

365 messaggi dal 08 febbraio 2009

Forse mi sono spiegato male.
Non ho fatto il "copia/incolla" del tuo codice ma ne ho uno fatto per conto mio.
Nel mio caso ho qualcosa di simile a:


<table>
   <thead>
      <tr>
         <th class="resizable" width="100px">Col1</th>
         <th class="resizable" width="200px">Col2</th>
         <th class="resizable" width="300px">Col3>/th>
      </tr>
   </thead>
   <tbody>
       <tr>
           <td>Dato1</td>
           <td>Dato2</td>
           <td>Dato3</td>
       </tr>
   </tbody>
</table>

Per cui la griglia viene creata correttamente con una dimensione di circa 600px (100 + 200 + 300).
Se poi provo ad ingrandire la colonna 2 (Col2), la griglia rimane di 600px, si ingrandisce la seconda colonna ma si rimpicciolisce la terza, il tutto per rimanere sempre dentro ai 600px iniziali.
Però io non ho mai dato una dimensione alla tabella, ma solo alle colonne.

Spero di essermi spiegato meglio

Rispondi Quoting

teo prome

l'1 settembre 2011 alle 13:02

531 messaggi dal 13 novembre 2008
Contributi
www.whereabouts.it

ti sei spiegato benissimo

Nel mio caso ho qualcosa di simile a:...

che poi alla fine dei conti riproduce lo stesso effetto grafico di quando si assegna la width ai td...

il codice che hai postato è corretto e deve funzionare senza rimpicciolimenti vari , a meno che da qualche altra parte, per esempio nel div contenitore, non hai impostato una larghezza fissa

Rispondi Quoting

JoeRuspante

l'1 settembre 2011 alle 15:23

365 messaggi dal 08 febbraio 2009

Uffi... Sai che hai ragione?
Pensavo fosse un problema della table.
In pratica vorrei ottenere su HTML una sorta di griglia con tante colonne che è visibile su una sola pagina ma che abbia una sua "scroll-bar" orizzontale e non quella della pagina.

Per ottenere questo effetto ho creato una tabella dentro ad un div con questo "trucco":


<div style="width:500px;overflow:auto" >
<table width=1024px >
... codice di prima ...
</table>
</div>

In questo modo, essendo il div di 500px e la griglia di 1024px, in fondo al div viene visualizzata la scroll-bar che mi consente di andare a destra e sinistra per vedere le colonne mancanti della griglia.

Se tolgo il div e tutte le varie "width" mi funziona correttamente il resize, però non mi impagina più la griglia come volevo io.

Se hai capito cosa volevo ottenere, sai per caso come posso farlo?

Grazie mille

Rispondi Quoting

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.

Community

Ultimi messaggi

UTENTI ONLINE

In primo piano