jqGrid: отключить поля формы при редактировании

Question

В настоящее время я занимаюсь разработкой веб-приложения, предназначенного для администрирования торговых автоматов и тому подобного. Я решил использовать jQuery, jQuery UI и jqGrid для этого проекта, поэтому я могу легко предоставить отличный и настраиваемый пользовательский интерфейс.
К сожалению, документация jqGrid довольно устарела и не охватывает все функции этого замечательного плагина (потому что он мне действительно нравится, хотя документация довольно скудная).

Во всяком случае, достаточно справочной информации, я полагаю. Давайте перейдем к сути:
Я использую навигационную панель, встроенную в jqGrid, для добавления, редактирования и удаления элементов из сетки.
У меня это работает как шарм, за исключением одного: некоторые поля могут быть включены (или видны) только при добавлении нового элемента, но не в режиме редактирования (они должны быть скрыты и / или отключены).

Пример:
Компания, в которой я работаю, продает вендинговые башни, и существует несколько типов (разных размеров и других) этих башен. Когда новая башня добавляется в локацию и вводится в систему, тип должен быть установлен. Но башня не волшебным образом меняется с течением времени, поэтому это поле нельзя редактировать позже.

Кто-нибудь знает, может ли это поведение быть достигнуто путем изменения некоторых параметров инициализации?
Возможно, это недокументированная опция редактирования (editoptions) или опция формы (formoptions)?
Или, может быть, у вас есть простое решение для этого?

Я хотел бы услышать ваше предложение / решения!
Спасибо =)

Answer 1

Вы можете реализовать свои требования по-разному. Например, внутри beforeShowForm событие, которое вы можете скрыть или показать

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

где идентификатор "tr_Name" создан из префикса "tr_", а "Name" - свойство name столбца из colModel,

ОБНОВЛЕНО: В ответе и в другом примере показан еще один способ динамического изменения свойств непосредственно перед инициализацией редактирования.

ОБНОВЛЕНО 2: Free jqGrid позволяет определить editable как функция обратного вызова или как "disabled", "hidden" или же "readonly", Смотрите статью в вики. Это позволяет легче реализовать те же требования.

Answer 2

Чтобы сделать поле доступным для редактирования или нет, вот что я запрограммировал после того, как некоторое время искал ответ (чтобы отключить редактирование при редактировании в строке, но разрешить его при "Добавить") и не нашел нужного мне ответа:

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

Answer 3

Видимый, но не редактируемый:

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

Answer 4

Вот пример:

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

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

Answer 5

Это будет работать с бесплатным jqgrid, простым и понятным:

Этот конкретный пример позволит редактировать только в форме "добавить":

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