jqgrid con un pannello informazioni per ogni colonna rende la griglia per mostrare lo scroll

Stiamo usando la griglia jQuery, l’ultima colonna della griglia dovrebbe avere il link. Cliccando sul link dovrebbe apparire un nuovo pannello che fornisce maggiori informazioni.

Quindi abbiamo usato un formattatore, che genera un hidden div e un link . Il problema è che per le ultime righe, il pannello delle informazioni rende la griglia per avere la barra di scorrimento.

Corretta inserisci la descrizione dell'immagine qui

scorretto inserisci la descrizione dell'immagine qui

Ho fatto un test molto semplice su http://jsfiddle.net/9a3uaL5h/ . come vedi cliccando il click me farò scorrere la griglia.

Il formattatore è come:

 function panelFormatter(cellvalue, options, rowObject) { return '
More Info
click me '; }

Come posso risolvere il fatto che il pannello sia visualizzato sulla griglia senza barra di scorrimento?

Non sono sicuro di come appaia il tuo vero codice, ma la demo di jsfiddle non è buona. In ogni caso il tuo problema principale: il

che usi per mostrare un’ulteriore informazione ha l’elemento

come genitore. È la ragione principale del tuo problema. Dovresti aggiungere il div al corpo prima di visualizzarlo per evitare il clipping sulla griglia.

Inoltre ti consiglierei

  • per utilizzare free jqGrid 4.13.4 invece di vecchio jqGrid 4.6
  • non inserire fix id="sample" nei div per evitare errori di duplicazione dell’ID
  • utilizzare la callback beforeSelectRow anziché l’attributo onclick . Il callback beforeSelectRow verrà chiamato all’interno del gestore di click associato alla griglia (

    ). Sarà chiamato a causa dell’evento ribollente . La proprietà tagret dell’object evento ci fornisce informazioni dettagliate sull’elemento su cui si fa clic.

La demo modificata potrebbe essere la seguente

 function panelFormatter(cellvalue, options, rowObject) { return '
More Info
click me'; } ... $("#grid").jqGrid({ ... beforeSelectRow: function (rowid, e) { var $td = $(e.target).closest("tr.jqgrow>td"), colName = $td.length < 0 ? null : $(this).jqGrid("getGridParam").colModel[$td[0].cellIndex].name; if (colName === "status" && e.target.tagName.toLowerCase() === "a") { // in the "status" column is clicked $td.find("div[name=sample]") .appendTo("body") .position({ of: $td, at: "left bottom", my: "left bottom+" + $td.height() }) .show(); } } });

vedi http://jsfiddle.net/OlegKi/9a3uaL5h/1/

AGGIORNATO: Si possono usare eventi jQuery allo stesso modo come i callback. Ad esempio, è ansible utilizzare l’evento jqGridBeforeSelectRow anziché il callback beforeSelectRow . Il codice sarà

 $("#grid").bind("jqGridBeforeSelectRow", function (event, rowid, e) { var $td = $(e.target).closest("tr.jqgrow>td"), colName = $td.length < 0 ? null : $(this).jqGrid("getGridParam").colModel[$td[0].cellIndex].name; if (colName === "status" && e.target.tagName.toLowerCase() === "a") { //  in the "status" column is clicked $td.find("div[name=sample]") .appendTo("body") .position({ of: $td, at: "left bottom", my: "left bottom+" + $td.height() }) .show(); } }); 

Vedi http://jsfiddle.net/9a3uaL5h/2/ . Tra l’altro si può usare jQuery.bind (o meglio jQuery.on ) prima che la griglia venga creata dalla

vuota. Vedi http://jsfiddle.net/9a3uaL5h/3/