Come inserire un link nell'Oggetto Database Viewer di WebSite X5

L'Oggetto opzionale Database Viewer di WebSite X5, basato sul plugin jTable, permette di aggiungere/modificare i dati presenti in un database in modo semplice, senza bisogno di conoscere alcun codice, e di visualizzarli in una tabella.

L'oggetto, attualmente, non prevede la possibilità di assegnare un link al valore di un campo, cosa che può essere utile se nel database, per esempio, vengono memorizzati i nomi dei file caricati sul server.

Abbiamo scartabellato un po' le API del plugin originale per cercare un'opzione/metodo che potesse sopperire a questa mancanza. E, in effetti, il plugin jTable prevede la possibilità di personalizzare il modo in cui i dati vengono visualizzati utilizzando l'opzione display.

Se nel plugin originale questa modifica è molto semplice, il problema, come spesso accade con WebSite, è trovare un modo per sovrascrivere le funzioni generate automaticamente dal programma.

Abbiamo provato due strade diverse, una agendo con jQuery sulla tabella già creata, l'altra utilizzando proprio le API di jTable.

  SOLUZIONE 1

In Proprietà Pagina → Esperto → Prima della chiusura del tag HEAD, inserire questo script:

<script> 
/* ============================================================== 
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit 
============================================================== */
$(document).ready(function() {
 //richiamo la funzione al caricamento della pagina
  mylink();
  //richiamo la funzione al click sulle intestazioni di colonna
  $(".jtable-column-header-container").click(function() {
    mylink();
  })
});

function mylink() {
  setTimeout(function() {
   //ciclo il contenuto delle celle della seconda colonna
    $("table.jtable tr > td:nth-child(2)").each(function() {
      var urlname = $(this).text();
   //creo link 
      $(this).html('<a href="folder/'+ urlname +'">' + urlname + '</a>');
    });
  }, 700);
}
</script>

Queste sono le personalizzazioni da fare:

1. $("table.jtable tr > td:nth-child(2)").each(function() {
   in questa riga di codice personalizzare il numero in rosso che corrisponde al numero della colonna (campo) a cui associare i link;
   
   
2. $(this).html('<a href="folder/'+ urlname +'">' + urlname + '</a>');
   in questa riga di codice personalizzare folder (in rosso) inserendo il nome della cartella sul server dove risiedono i file da linkare.

Il codice deve agire dopo che la tabella è stata generata quindi ne abbiamo ritardato l'esecuzione di 700 millisecondi con il metodo setTimeout()
E questo è il punto debole di questa soluzione: questo ritardo va calibrato in funzione del tempo medio di caricamento della pagina, quindi qualche volta questo metodo può fallire.

Qui la nostra DEMO

SOLUZIONE 2

Il metodo utilizzato in questa soluzione agisce invece prima della creazione della tabella e di fatto estende le opzioni del plugin jTable: a differenza della soluzione 1, non soffre problemi di ritardo ma potrebbe risultare più laboriosa la personalizzazione del codice.

In Proprietà Pagina → Esperto → Prima della chiusura del tag HEAD, inserire questo script:

<script> 
$.extend(true, $.hik.jtable.prototype.options.fields, {
    nome: {},
    documento: {
     display: function(data) {
       return $('<a href="folder/' + data.record.documento + '">' + data.record.documento + '</a>');
     }
 }
});
</script>

Le parti da personalizzare si riferiscono rispettivamente a:

1. nome: {},
   in questa riga di codice sostituire nome (in rosso) con il nome del campo che precede la colonna in cui inserire il link.
   Se sono presenti più colonne che precedono il campo in cui inserire il link, ripetere la riga di codice per tutte le occorrenze; ad esempio, se la colonna con i link è preceduta da tre campi, il codice diventerà così:
   
   nomecampo1: {},
   nomecampo2: {},
   nomecampo3: {},
   
   
   Ovviamente i valori in rosso sono da personalizzare con i nomi reali dei campi.
   L'elenco dei campi precedenti serve solo per mantenere inalterata la posizione originale delle colonne.
   
   
2. documento: { 
     display: function(data) { 
       return $('<a href="folder/' + data.record.documento + '">' + data.record.documento + '</a>'); 
    }
   
   in questa parte di codice sostituire documento (in rosso) con il nome del campo a cui devono essere associati i collegamenti e folder (in verde) con il nome della cartella sul server dove risiedono i file da linkare.

Qui la nostra DEMO