Visualizza controlli modulo sopra la tabella quando si modifica in linea con jqGrid

Question

Sto utilizzando jqGrid con la modifica in linea abilitata. Il problema è che il contenuto di alcuni dei campi sono piuttosto lunghi, e per impostazione predefinita il campo non è abbastanza grande per essere utilizzabile:

Quello che voglio fare è impostare una larghezza fissa per textarea, e farlo espandere per essere visibile sopra la tabella quando diventa attiva. Qualcosa di simile a questo:

posso impostare il CSS per la textarea in editoptions:dataInit, ma se ho appena aumentare la larghezza, il lato destro del textarea ottiene tagliato fuori alla fine della cella della tabella. Immagino di poter risolvere il problema con un CSS intelligente?

BTW, so che un editor popup potrebbe probabilmente avere più senso per questo, ma il cliente insiste che rimane un editor in linea.

Answer 1

Se ho compreso correttamente le tue esigenze, vuoi avere textarea che sono più grandi della cella corrispondente della griglia. Nel caso potrei suggerire di cambiare la posizione di textarea in "assoluto". Nel caso si può ridimensionare a textarea ed avere risultati come

Come si può vedere il grande textarea si sovrappongono gli altri controlli di input. Per rendere più agevole la modifica di tutti i campi di immissione e rendere più confortevole l'immissione in textarea, suggerisco di utilizzare anche jQuery.resizable(). Così uno sarà in grado di ridimensionare il textarea:

Troverete corrispondente demo here. La parte più importante del codice è qui sotto:

onSelectRow: function (rowid, status, e) { 
    var $this = $(this); 
    if (rowid !== lastSel) { 
     if (lastSel) { 
      $(this).jqGrid('saveRow', lastSel); 
     } 
     lastSel = rowid; 
    } 
    $this.jqGrid('editRow', rowid, { 
     keys: true, 
     oneditfunc: function(id) { 
      var $textareas = $("#" + id + " textarea"); 
      $textareas.each(function() { 
       var $textarea = $(this); 
       $textarea.css({position: "absolute", zIndex: "auto", width: "200px"}); 
       $textarea.position({ 
        of: $textarea.parent(), 
        my: "left top", 
        at: "left top", 
        offset: "1 1" 
       }); 
       $textarea.resizable(); 
       // now we fix position of the resizable wrapper which is 
       // the parent of the textarea after calling of .resizable() 
       $textarea.parent().css({ 
        "padding-bottom": "0px", 
        "padding-right": "0px" 
       }); 
       // change focus to the control from the clicked cell 
       $("input,select,textarea", e.target).focus(); 
      }); 
     } 
    }); 
    return true; 
} 

Nel codice di cui sopra ho usato in aggiunta il trucco con messa a fuoco sulla cella cliccato come ho descritto originariamente nel the answer.

Per rendere le differenze dei miei suggerimenti per il comportamento jqGrid livello più chiaro suggerisco di confrontare la demo di cui sopra con the following one quale schermo

UPDATE: Dopo aver scritto della risposta che ho postato the feature request trirando. Uno dei maggiori problemi nell'implementazione del suggerimento precedente era che non è possibile spostare il codice che imposta la posizione di textarea su "assoluto" completa in dataInit. Il suggerimento nella richiesta di funzionalità lo renderà possibile.