jqGrid: Disable form fields when editing

问题:

I\'m currently developing a web application designed for the administration of vending machines and such. I decided to use jQuery, jQuery UI and jqGrid for this project, so I can easily provide a great and highly customizable user interface.
Unfortunately, the jqGrid documentation is pretty outdated and doesn\'t cover all the features of this great plug-in (cause I do really like it, even though the documentation is rather poor).

Anyway, enough background information, I suppose. Let\'s get to the point:
I use the navbar which is built-in to jqGrid to Add, Edit and Delete items from the grid.
I\'ve got this working like a charm, except for one thing: some fields may only be enabled (or visible) when adding a new item and not when in editing-mode (they should be hidden and/or disabled).

Example:
The company I\'m working for sells vending towers and there are several types (different sizes and stuff) of these towers. When a new tower is added to a location and entered into the system, the type must be set. But the tower doesn\'t magically change over time, so this field may not be edited later on.

Does anyone know if this behavior can be accomplished by changing some initialization parameters?
Perhaps it\'s an undocumented edit-option (editoptions) or form-option (formoptions)?
Or maybe you\'ve got a simple solution for this?

I\'d love to hear your suggestion / solutions!
Thanks =)

回答1:

You can implement your requirements in different ways. For example, inside of beforeShowForm event you can hide or show the

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(); }
          });

where the id \"tr_Name\" is constructed from \"tr_\" prefix and \"Name\" - the name property of the column from the colModel.

UPDATED: In the answer and in another one are shown one more way how the properties can be changed dynamically immediately before the editing will be initialized.

UPDATED 2: Free jqGrid allows to define editable as callback function or as \"disabled\", \"hidden\" or \"readonly\". See the wiki article. It allows to implement the same requirements more easy.

回答2:

To make the field editable or not, this is what I wound up coding after searching for an answer for a while (to disable editing on in-row edit, but allow it on \'Add\') and not finding the answer I needed:

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});
            },

回答3:

Here is an example:

http://www.ok-soft-gmbh.com/jqGrid/CustomFormEdit.htm

                  beforeShowForm: function(form) {
                     $(\'#tr_Name\', form).hide();
                  }

回答4:

Visible but not editable:

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

回答5:

This will work with the free jqgrid, plain and simple:

This particular example will allow edit only in the \"add\" form:

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;
                            }