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

jQuery("#CustomerDetailsGrid").jqGrid({
    //ignore other properties
    colModel: [
    { name: 'AccountNumber', index: 'AccountNumber', hidden: true, viewable: true }
],
    viewrecords: true        
});

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

9
jqgrid jqgrid-asp.net jquery

4 ответов

если будет создан диалог просмотра, он будет заполнен информацией о каждом столбце, размещенном в строках. Идентификатор строки (идентификатор <tr> element) будет построен из префикса "trv_" и имени соответствующего столбца. Важно понимать, что в форме будет заполнена информация о все колонки включительно скрытые столбцы, а <tr> элементы для скрытых столбцов будут скрыты (имеет style= " display: никто.)"; Поэтому, чтобы сделать информацию видимой, достаточно позвонить соответствующего <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();
                      }
                  });
11

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

colModel: [{ name: 'AccountNumber', index: 'AccountNumber', hidden: true, viewable: true,editrules:{edithidden:true} }]
13

в последующем 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>
3

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

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