Modifica della proprietà modificabile della colonna di testo jqGrid in base ai risultati di un completamento automatico in un'altra colonna

Question

Sto utilizzando jqGrid 4.4.0 con la modifica in linea. Per il gusto di questa domanda, la mia griglia ha quattro colonne: una colonna ID (SomeGridRowId), una colonna di testo con un completamento automatico jQuery (completamento automatico), una colonna di testo a carattere singolo (SingleChar) e una colonna nascosta boolean (CanEditSingleChar). Devo abilitare o disabilitare la modifica della colonna di un singolo carattere in base al valore della colonna CanEditSingleChar. Ho questo lavoro su righe esistenti utilizzando onSelectRow e setColProp, ma per qualche motivo non riesco a farlo funzionare correttamente sulle nuove righe inserite. Se aggiungo una nuova riga e selezioni un valore dal completamento automatico, la colonna SingleChar è sempre modificabile. Ho fatto un passo attraverso il Javascript usando gli strumenti di sviluppo di Chrome e IE; i valori e le proprietà della colonna vengono impostati correttamente, ma la proprietàdella colonna SingleChar non riflette questo.

Mi scuso per il gigantesco snippet di codice, ma non voglio lasciare nulla.

$("#coolGrid").jqGrid({ 
    url: '@Url.Action("GetCoolGridData")', 
    postData: { 
     someId: function() { return $("#someId").val(); }, 
     otherStaticArg: function() { return 1; } 
    }, 
    datatype: 'json', 
    mtype: 'POST', 
    loadonce: true, 
    cellsubmit: 'clientArray', 
    editurl: 'clientArray', 
    scroll: true, 
    pager: $("#coolGridPager"), 
    rowNum: 200, 
    sortname: 'SomeGridRowId', 
    sortorder: 'asc', 
    viewrecords: true, 
    height: '100%', 
    colNames: ['SomeGridRowId', 'CanEditSingleChar', 'Autocomplete', 'SingleChar'], 
    colModel: [ 
     { name: 'SomeGridRowId', index: 'SomeGridRowId', hidden: true }, 
     { name: 'CanEditSingleChar', index: 'CanEditSingleChar', hidden: true }, 
     { 
      name: 'Autocomplete', 
      index: 'Autocomplete', 
      width: 220, 
      editable: true, 
      edittype: 'text', 
      editoptions: { 
       dataInit: function (elem) { 
        $(elem).autocomplete({ 
         source: '@Url.Action("GetSomeGridAutocomplete")', 
         minLength: 2, 
         select: function (event, ui) { 
          var rowId = getRowId($(this)); 
          if (ui.item) { 
           $("#coolGrid").jqGrid('setCell', rowId, 'CanEditSingleChar', ui.item.CanEditSingleChar, '', ''); 
           $("#coolGrid").jqGrid('setCell', rowId, 'Autocomplete', ui.item.label, '', ''); 
           setSingleCharEditMode(rowId); 
          } 
         } 
        }); 
       } 
      } 
     }, 
     { 
      name: 'SingleChar', 
      index: 'SingleChar', 
      width: 10, 
      editable: true,  //default to true, most are editable 
      edittype: 'text' 
     } 
    ], 
    onSelectRow: function (clickedRow) { 
     if (clickedRow && clickedRow != $.coolGridLastSelectedRow) { 
      $("#coolGrid").jqGrid('saveRow', $.coolGridSelectedRow, false, 'clientArray'); 
      $.coolGridLastSelectedRow = clickedRow; 
     } 
     setSingleCharEditMode($.coolGridLastSelectedRow); 
     $("#coolGrid").jqGrid('editRow', $.coolGridLastSelectedRow, true); 
    }, 
    afterInsertRow: function (rowid, rowdata, rowelem) { 
     if (rowid == 'new_row') {  //shown solely for completeness, pretty sure this is not the problem 
      var newRowIndex = $("#coolGridNewRowIndex").val(); 
      if (!newRowIndex) 
       newRowIndex = 1; 
      var newRowId = rowid + "_" + newRowIndex; 
      $("#new_row").attr('id', newRowId); 
      newRowIndex++; 
      $("#coolGrid").val(newRowIndex); 
      $("#coolGrid").jqGrid('setSelection', newRowId, true); 
     } 
    } 
}); 
$("#coolGrid").jqGrid('navGrid', '#coolGridPager', 
{ 
    add: false, 
    del: false, 
    edit: false, 
    search: false, 
    beforeRefresh: function() { 
     $("#coolGrid").jqGrid('setGridParam', { datatype: 'json' }); 
    } 
}); 
$("#coolGrid").jqGrid('inlineNav', '#coolGridPager', 
{ 
    edit: false, 
    add: true, 
    addtext: "Add", 
    save: false, 
    cancel: false, 
    restoreAfterSelect: false, 
    addParams: { 
     position: 'last', 
     addRowParams: { 
      keys: true 
     } 
    } 
}); 

E la funzione setSingleCharEditMode:

function setSingleCharEditMode(rowid) { 
    var rowData = $("#coolGrid").jqGrid('getRowData', rowid); 
    if (rowData.CanEditSingleChar === "false") { 
     $("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: false }); 
    } else { 
     $("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: true }); 
    } 
} 

Ho provato una grande quantità di roba, rigata attraverso un mucchio di altre domande in modo, su google come un pazzo .... tutto inutile. Ho fatto ricorso a strapparmi i capelli. Come posso controllare la proprietà editable di una colonna dopo il completamento automatico select su un'altra colonna, il tutto su una nuova riga?

EDIT
Ho un working example up here, finalmente. Se si aggiunge una riga e quindi si seleziona "Atypical *" nella colonna Autocomplete, è possibile riprodurre questo comportamento.

Answer 1

Senza un esempio reale è difficile dire perché le righe aggiunte di recente non possono essere modificate. Inoltre, è abbastanza difficile mettere insieme un semplice esempio di lavoro (ad esempio su jsfiddle o jsbin) a causa di jqGrid e altre dipendenze.

Alcune domande dopo aver guardato attraverso il vostro codice che potrebbe aiutare (o potrebbe essere nulla di nuovo a quello che già provato):

• addRow - Come si fa ad aggiungere una riga, utilizzando il addRow function? Tutto il resto "jqGrid related" funziona con le nuove righe aggiunte, cioè viene inizializzato correttamente? Ho avuto alcuni problemi con questo tipo di problema usando datatables.

• ID riga corretto/univoco? - Hai verificato che lo rowid è univoco per le nuove righe e che il tuo codice viene eseguito con quello corretto (vale a dire l'ID della nuova riga)? Hai inserito le dichiarazioni console.log in setSingleCharEditMode per vedere cosa sta succedendo (solo per essere sicuro, hai detto che hai già passato il codice)?

  Si potrebbe essere impostando la proprietà editable di una cella in un'altra riga (A pensarci bene: questo non può essere, come la cella deve essere modificabile per impostazione predefinita e la esplicitamente impostato per non essere modificabile dal codice .). Modificare il colore della riga insieme alla proprietà editable per vedere facilmente su quale cella/riga viene lavorato.

• Come impostazione predefinita? - Come il valore predefinito di editable è true: hai provato disattivando setSingleCharEditMode e vedi che la cella è modificabile per impostazione predefinita? Forse il problema non è la tua valutazione ma l'aggiunta della riga ?

• Tipo corretto? - In setSingleCharEditMode si verifica il valore della colonna per strict equality con la stringa "false". Sei sicuro che i valori abbiano lo stesso tipo per linee esistenti e nuove (dovrebbero essere, poiché sono stringhe e vengono analizzate tramite lo stesso codice jqGrid: getRowData)? Credo che avete già console.log ged ampiamente in quella funzione per vedere cosa sta succedendo con il passato id e il confronto che imposta la proprietà editable‽

Spero che questo aiuti un po 'per trovare il problema. Come ho detto, è davvero difficile eseguire il debug senza un esempio funzionante. Potresti volerne uno da qualche parte.

[Edit dopo esempio di lavoro]

prima cosa che vedo è che se si seleziona "Disturbo atipico Manic" in un modificabile riga esistente, si applica lo stesso comportamento. Inoltre: l'aggiunta di righe modificabili (qualcosa di bipolare) funziona. Questo non sembra essere un problema di "nuova riga" rispetto a "riga esistente". Più simile a un problema con le righe modificabili che vengono cambiate in non modificabili.

La mia ipotesi è che questo sta accadendo:

1. Si sta aggiungendo una nuova riga, colonna SingleChar è modificabile per impostazione predefinita, in modo che il <input> viene mostrato.
2. Valutare la risposta del server e impostare la colonna su editable : false nel completamento automatico select.
3. deselezionate la riga e jqGrid ritorna tutte le righe poi modificabili, in modo che non tocchi SingleChar, perché pensa cheSingleChar non ha bisogno di essere reimpostato allo stato iniziale ..

Ho un senso?

Provare a impostare editable a false dopo jqGrid ripristinare la riga o rimuovere il <input> da soli.