2010-08-04 4 views
17

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

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

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

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

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

ответ

36

Вы можете реализовать свои требования по-разному. Например, внутри 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» - имя свойства столбца из colModel.

ОБНОВЛЕНО: В the answer и another one показаны еще один способ, как свойства могут быть динамически непосредственно перед редактированием будет инициализирован изменен.

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

+0

Спасибо, отлично работает! –

+0

Спасибо за информацию. Кроме того, если вы хотите скрыть столбец в сетке, но показать в форме добавления или редактирования, используйте скрыть: true в colModel и в методе beforeShowForm использовать метод show(). – Tareq

+0

@Tareq: Добро пожаловать! – Oleg

8

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

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

Вот пример:

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

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

Привет josemaria, можете ли вы рассказать мне, как я могу добавить эту дополнительную информацию? Где мне поставить этот код? Благодарю. – bombai

0

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

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

Это будет работать со свободным 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; 
          } 
Смежные вопросы