jQgrid show hidden column in form view

2019-01-19 13:41发布

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

I need to hide the column "Account Number" in grid view but show it in the form view.(Not edit form)

4条回答
在下西门庆
2楼-- · 2019-01-19 14:24

To follow-up J_'s suggestion, applying the following does the trick:

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

Scenario #1:

  • Field must be visible in the grid
  • Field must be visible in the form
  • Field must be read-only

Solution:

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

The providerUserId is visible in the grid and visible when editing the form. But you cannot edit the contents.


Scenario #2:

  • Field must not be visible in the grid
  • Field must be visible in the form
  • Field must be read-only

Solution:

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

Notice in both instances I'm using jq to reference jquery, instead of the usual $. In my HTML I have the following script to modify the variable used by jQuery:

<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>
查看更多
一夜七次
3楼-- · 2019-01-19 14:28

The best way is only adding the editrules:{edithidden:true} option.

colModel: [{ name: 'AccountNumber', index: 'AccountNumber', hidden: true, viewable: true,editrules:{edithidden:true} }]
查看更多
对你真心纯属浪费
4楼-- · 2019-01-19 14:34

If the View dialog will be created it will be filled with the information about every column placed in the rows. The id of the row (the id of <tr> element) will be constructed from the prefix "trv_" and the name of the corresponding column. It it important to understand, that in the form it will be filled the information about all columns inclusive hidden columns, but <tr> elements for the hidden columns will be hidden (has style="display: none;"). So to make the information visible it is enough to call jQuery.show() function for the corresponding <tr> element.

I prepared the small demo which demonstrate this. In the demo id column are hidden, but I make the information visible inside of beforeShowForm and afterclickPgButtons event handler of the View options:

$("#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();
                      }
                  });
查看更多
欢心
5楼-- · 2019-01-19 14:36

To hide the grid column

jQuery("#GridId").jqGrid('hideCol','colName');
查看更多
登录 后发表回答