jQgrid показать скрытый столбец в виде формы - PullRequest
Новая
       30

jQgrid показать скрытый столбец в виде формы

9 голосов
/ 10 января 2011 
jQuery("#CustomerDetailsGrid").jqGrid({
    //ignore other properties
    colModel: [
    { name: 'AccountNumber', index: 'AccountNumber', hidden: true, viewable: true }
],
    viewrecords: true        
});

Мне нужно скрыть столбец «Номер счета» в виде сетки, но показать его в виде формы ( Не редактировать форму )

Ответы [ 4 ]

13 голосов
/ 28 июля 2011

Лучший способ - добавить параметр editrules: {edithidden: true}. 

colModel: [{ name: 'AccountNumber', index: 'AccountNumber', hidden: true, viewable: true,editrules:{edithidden:true} }]
11 голосов
/ 11 января 2011

Если будет создан диалог Вид, он будет заполнен информацией о каждом столбце, размещенном в строках. Идентификатор строки (идентификатор элемента <tr>) будет создан из префикса «trv_» и имени соответствующего столбца. Важно понимать, что в форме будет заполнена информация о всех столбцах включительно скрытых столбцах , но <tr> элементы для скрытых столбцов будут скрыты = "дисплей: нет;"). Поэтому, чтобы сделать информацию видимой, достаточно вызвать функцию jQuery.show() для соответствующего элемента <tr>.

Я подготовил небольшую демонстрацию , которая демонстрирует это. В демоверсии id столбцы скрыты, но я делаю информацию видимой внутри beforeShowForm и afterclickPgButtons обработчика событий параметров просмотра: 

$("#list").jqGrid('navGrid','#pager',
                  {add:false,edit:false,del:false,view:true,search:false},
                  {}, // edit options
                  {}, // add options
                  {}, // del options
                  {}, // search options
                  {   // vew options
                      beforeShowForm: function(form) {
                          $("tr#trv_id",form[0]).show();
                      },
                      afterclickPgButtons: function(whichbutton, form, rowid) {
                          $("tr#trv_id",form[0]).show();
                      }
                  });
3 голосов
/ 08 мая 2011

Чтобы выполнить предложение J_ , примените следующее: 

editoptions: { dataInit: function(element) { $(element).attr("readonly", "readonly"); } }

Сценарий № 1 :

  • Поле должно быть видно в сетке
  • Поле должно быть видно в виде
  • Поле должно быть только для чтения

Решение 

colModel:[
   {name:'providerUserId',index:'providerUserId', width:100,editable:true, editrules:{required:true}, editoptions:{ dataInit: function(element) { jq(element).attr("readonly", "readonly"); } }},
],

providerUserId отображается в сетке и отображается при редактировании формы. Но вы не можете редактировать содержимое.

Сценарий № 2 :

  • Поле не должно быть видно в сетке
  • Поле должно быть видно в виде
  • Поле должно быть только для чтения

Решение 

colModel:[
    {name:'providerUserId',index:'providerUserId', width:100,editable:true, editrules:{required:true, edithidden:true}, hidden:true, editoptions:{ dataInit: function(element) { jq(element).attr("readonly", "readonly"); } }},
]

Обратите внимание, что в обоих случаях я использую jq для ссылки на jquery вместо обычного $. В моем HTML у меня есть следующий скрипт для изменения переменной, используемой jQuery: 

<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>
1 голос
/ 14 декабря 2012

Чтобы скрыть столбец сетки 

jQuery("#GridId").jqGrid('hideCol','colName');
...