Javascript jqGrid中的隐藏列

有没有办法隐藏jqGrid表中的列，但在表单编辑器模式对话框中编辑行时将其显示为只读？

您可以使用以下代码隐藏表列

JQuery("tableName").hideCol("colName");

您可以使用下面的代码再次显示它

JQuery("tableName").showCol("colName");

---

对于您的问题，您可以调用document.ready（）上的hideCol（）代码，并可以在对话框的编辑/单击事件上绑定showCol（）代码。

此功能内置于jqGrid中

按如下方式设置网格函数

$('#myGrid').jqGrid({
   ...
   colNames: ['Manager', 'Name', 'HiddenSalary'],
   colModel: [               
               { name: 'Manager', editable: true },
               { name: 'Price', editable: true },
               { name: 'HiddenSalary', hidden: true , editable: true, 
                  editrules: {edithidden:true} 
               }
             ],
   ...
};

---

可以应用其他编辑规则，但此基本设置将在网格视图中隐藏经理的薪资，但允许在显示编辑表单时进行编辑

尝试使用edithidden:true和do

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

---

或者查看jqGrid wiki进行自定义编辑，您可以设置任何输入类型，甚至我认为是标签。

我想这条线索很老了，但万一其他人遇到这个问题。。。 我必须从表的选定行中获取一个值，但我不想显示该行来自的列。我用了hideCol，但和Andy一样，它看起来很凌乱。为了修复它（称之为hack），我只需重新设置网格的宽度

jQuery(document).ready(function() {

       jQuery("#ItemGrid").jqGrid({ 
                ..., 
                width: 700,
                ...
        }).hideCol('StoreId').setGridWidth(700)

---

由于我的行宽度是自动的，当我重置表的宽度时，它重置了列宽，但排除了隐藏的列宽，因此它们填补了空白。

我只想扩展queen3的建议，应用以下方法可以实现：

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

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

• 字段必须在网格中可见
• 字段必须在窗体中可见
• 字段必须是只读的

解决方案：

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

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

providerUserId在网格中可见，并且在编辑表单时可见。但您不能编辑内容

---

场景2：

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

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

• 字段不能在网格中可见
• 字段必须在窗体中可见
• 字段必须是只读的

解决方案：

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

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>

var jq=jQuery.noConflict（）；

隐藏网格列的步骤

jQuery("#validGrid").jqGrid('hideCol',str);

---

这篇文章有点旧。但这是我显示/隐藏列的代码。我使用内置函数来显示列并只标记它们

函数，用于显示显示列/隐藏列。#jqGrid是我的网格的名称，columnChooser是jqGrid列选择器

  function showHideColumns() {
        $('#jqGrid').jqGrid('columnChooser', {
            width: 250,
            dialog_opts: {
                modal: true,
                minWidth: 250,
                height: 300,
                show: 'blind',
                hide: 'explode',
                dividerLocation: 0.5
            } });

---

您可能还希望在一个事件中绑定hideCol（）代码，该事件对应于正在完成的编辑，或者当用户/编辑器正在进行编辑时。这几乎就是我想要的，只是我不希望它在编辑表单中可编辑。我想没有办法了。精彩的场景讲解+1尝试在事件发生后调整列的大小。