Tabella dinamica
- Questo topic ha 5 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 11 anni, 5 mesi fa da Valerix.
- AutorePost
- 12 Dicembre 2012 alle 15:15 #3853ValerixPartecipante
Ciao a tutti,
volevo chiedervi un’aiuto per quanto riguarda la realizzazione di una tabella dinamica. La tabella deve poter soddisfare questi requisiti:
Possibilità di aggiungere/rimuovere le relative righe
Alcuni campi (che sono delle input text) devono funzionare come la Google Instant Search, mostrando quindi dei valori che dovranno essere recuperati da un db mysql. Una volta che vengono mostrati i risultati (vi sembrava fin troppo facile qui!), quando verrà cliccato il valore mostrato dovrà essere aggiornata un’altra input text che si trova nella stessa riga.Es.
Cerco il codice di un prodotto (9018)
Mi vengono mostrati i codici (90182,90188)
Clicco sul codice 90182
La input text accanto, viene valorizzata con il nome del prodottoIo son riuscito a fare il 98% di tutto questo, tranne l’ultima parte che si occupa di inserire il valore nell’altra input text. Purtroppo o viene inserito in tutte le input text oppure nell’ultima riga, benchè stia modificando la prima. Se volete posso postare il codice a riguardo.
Grazie!
ps. son aperto a tutte le soluzioni, che sia utilizzare script già pronti o modificare lo script attuale
13 Dicembre 2012 alle 17:39 #3855jqueryitaliaAmministratoreCiao Valerix!
Se non avessi già creato il 98% dello script ti avrei suggerito di utilizzare, customizzandolo, Data Tables.
Visto che però sei alla fine del lavoro, vediamo di provare ad aiutarti in altro modo: riesci a farci vedere il tuo codice su una pagina di esempio o postandolo qui? 😉
14 Dicembre 2012 alle 10:35 #3860ValerixPartecipanteCiao!
A dir la verità stavo optando per utilizzare Data Tables visto che già lo uso in altre pagine…
Hai idee a riguardo?
Perchè rivedendo il codice è un bel macello, provvedo a farti avere una pagina di esempio a brevissimo!
Grazie!
17 Dicembre 2012 alle 09:47 #3870ValerixPartecipanteEcco un’estratto del codice!
function ajax_option_setValue(e,inputObj) { if(!inputObj)inputObj=this; var tmpValue = inputObj.innerHTML; if(ajax_list_MSIE)tmpValue = inputObj.innerText;else tmpValue = inputObj.textContent; if(!tmpValue)tmpValue = inputObj.innerHTML; ajax_list_activeInput.value = tmpValue; if(!isNaN(tmpValue)) { //We retrive the code and then put the product name var url = ajax_list_externalFile + '?get_prod_name' + '=1&letters=' + tmpValue; var title = ""; $.post(url, { title: title }, function(data){ jQuery('[name^=input_products_edit]').last().val(data); }); } else { //We retrive the code and then put the product name var url = ajax_list_externalFile + '?get_prod_code' + '=1&letters=' + tmpValue; var title = ""; $.post(url, { title: title }, function(data){ var id = $("[name^=input_cod_products_edit]").closest("input").attr("name"); jQuery('[name^=input_cod_products_edit]').last().val(data); }); } if(document.getElementById(ajax_list_activeInput.name + '_hidden'))document.getElementById(ajax_list_activeInput.name + '_hidden').value = inputObj.id; ajax_options_hide(); }<pre class="brush: javascript; gutter: true; first-line: 1; highlight: []; html-script: false">
18 Dicembre 2012 alle 17:44 #3872ValerixPartecipanteRieccomi qui,
dato che non ho ricevuto risposte (giustamente siam sotto natale e non posso pretendere!)
ho provveduto a “migrare” la tabella in questione con dataTable.Ecco il codice che utilizzo:
<script type="text/javascript" charset="utf-8"> var $ = jQuery.noConflict(); $(document).ready(function() { $('#table_reserved_price_list').dataTable({ }); }); function fnClickAddRow() { $('#table_reserved_price_list').dataTable().fnAddData([ giCount + ".1", giCount + ".2", giCount + ".3", giCount + ".4", giCount + ".5"]); giCount++; } function fnClickRemoveRow() { var oTable = $('#table_reserved_price_list').dataTable(); var row = $(this).closest("tr").get(0); oTable.fnDeleteRow(oTable.fnGetPosition(row)); } </script>
I due tastini (aggiungi riga, rimuovi riga) sono dichiarati in questo modo:
<a href=\"javascript:void(0);\" class='addRow' onclick=\"fnClickAddRow();\"><img src=\"icons/add.png\" border=\"0\" width=\"12px\"></a> <a href=\"javascript:void(0);\" onclick=\"fnClickRemoveRow();\" class=\"delete\"><img src=\"icons/delete.gif\" border=\"0\"></a>
Ora mi rimane da rendere disponibile la possibilità di avere una cella (es. titolo prodotto) popolata automaticamente non appena inserisco un valore nella cella precedente (es. codice prodotto). Ho già scritto il codice che dà dei risultati in un modo simile a ciò che fa Google con l’Istant Search.
Se c’è bisogno di altro codice, son a disposizione e confido nel vostro aiuto per poter risolvere questo problema che mi assilla da mesi =(
Grazie!
19 Dicembre 2012 alle 10:24 #3874ValerixPartecipanteCome non detto,
una volta introdotto DataTables è andato tutto liscio come l’olio 😀Se avete bisogno, posso postare la soluzione completa.
Grazie!
- AutorePost
- Devi essere connesso per rispondere a questo topic.