2010-08-04 16 views
17

Attualmente sto sviluppando un'applicazione Web progettata per l'amministrazione di distributori automatici e simili. Ho deciso di utilizzare jQuery, jQuery UI e jqGrid per questo progetto, così posso facilmente fornire un'interfaccia utente grande e altamente personalizzabile.
Sfortunatamente, lo jqGrid documentation è piuttosto obsoleto e non copre tutte le funzionalità di questo ottimo plug-in (perché mi piace molto, anche se la documentazione è piuttosto scarsa).jqGrid: disabilita i campi modulo durante la modifica

Ad ogni modo, suppongo, sufficienti informazioni di base. Andiamo al punto:
Io uso la barra di navigazione che è integrata in jqGrid per aggiungere, modificare ed eliminare elementi dalla griglia.
Ho funzionato come un incantesimo, tranne che per una cosa: alcuni campi possono essere abilitati (o visibili) solo quando si aggiunge un nuovo oggetto e non quando si è in modalità di modifica (dovrebbero essere nascosti e/o disabilitati).

Esempio:
L'azienda per cui sto lavorando per vende torri automatici e ci sono diversi tipi (differenti dimensioni e roba) di queste torri. Quando viene aggiunta una nuova torre a una posizione e immessa nel sistema, è necessario impostare il tipo . Ma la torre non cambia magicamente nel tempo, quindi questo campo non può essere modificato in seguito.

Qualcuno sa se questo comportamento può essere ottenuto modificando alcuni parametri di inizializzazione?
Forse è un'opzione di modifica non documentata (opzioni di modifica) o modulo-opzione (formoptions)?
O forse hai una soluzione semplice per questo?

Mi piacerebbe sentire i vostri suggerimenti/soluzioni!
Grazie =)

risposta

36

È possibile implementare i requisiti in diversi modi. Ad esempio, all'interno di beforeShowForm evento è possibile nascondere o visualizzare la

jQuery("#list").jqGrid({ 
    colModel: [ 
     { name: 'Name', width: 200, editable: true }, 
    //... 

}).jqGrid('navGrid','#pager', { edit: true, add: true, del: false}, 
      { // edit option 
       beforeShowForm: function(form) { $('#tr_Name', form).hide(); } 
      }, 
      { // add option 
       beforeShowForm: function(form) { $('#tr_Name', form).show(); } 
      }); 

dove l'id "tr_Name" è costruito dal prefisso "TR_" e "Nome" - la proprietà nome della colonna dal colModel.

AGGIORNAMENTO: In the answer in another one sono mostrati un altro modo come le proprietà possono essere modificate dinamicamente immediatamente prima del montaggio verrà inizializzata.

AGGIORNAMENTO 2: Free jqGrid permette di definire editable come funzione di callback o "disabled", "hidden" o "readonly". Vedi the wiki article. Permette di implementare gli stessi requisiti più facilmente.

+0

Grazie, funziona perfettamente! –

+0

Grazie per le informazioni. Inoltre, se si desidera nascondere la colonna nella griglia ma mostrare in forma di aggiunta o modifica, utilizzare hidden: true in colModel e in beforeShowForm utilizzare il metodo show(). – Tareq

+0

@Tareq: siete i benvenuti! – Oleg

8

Per rendere il campo modificabile o meno, questo è quello che ho terminato la codifica dopo aver cercato una risposta per un po '(per disabilitare la modifica nella modifica in-fila, ma consentirle su' Aggiungi ') e non trovare la risposta Avevo bisogno di:

colModel :[ 
    {name:'id', index:'id', editable:false, ... 

    }).navGrid("#pager",{edit:false,add:true,del:false,search:false,refresh:true}, 
     {}, // edit 
     { 
      beforeInitData: function(formid) { 
       $("#list").jqGrid('setColProp','id',{editable:true}); 
      }, 
      afterShowForm: function (formid) { 
       $("#list").jqGrid('setColProp','id',{editable:false}); 
      }, 
0

visibile ma non modificabile:

{ // edit option 
    beforeShowForm: function(form) { 
     $('#col_name', form).attr("disabled", true); 
    } 
} 
0

Ciò funzionerà con la jqGrid libero, chiaro e semplice:

Questo particolare esempio permetterà di modifica solo nella forma "add":

editable: function (options) { 
          // Allow edit only for "add" not for "edit" 
          if (options.mode === "addForm") 
          { 
           return true; 
          } 
          else if (options.mode === "editForm") 
          { 
           return false; 
          } 
          else 
          { 
           return false; 
          } 
Problemi correlati