jqGrid中的隐藏列

Question

有没有一种方法可以隐藏jqGrid表格中的某列，但在行在表单编辑模态对话框中进行编辑时以只读方式显示该列？

- maxpower47

Answer 1

这个功能已经集成在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} 
               }
             ],
   ...
};

还有其他可以应用的编辑规则，但这个基本设置将在网格视图中隐藏经理的薪水，并在显示编辑表单时允许编辑。

- Bobby Borszich

---

这几乎是我要找的，除了我不希望在编辑表单中对其进行编辑。我想没有办法做到这一点。 - maxpower47

Answer 2

我只是想进一步阐述 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"); 
                             } 
                           }
            },
],

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>

- chris

---

超棒的解释，附带场景..!! +1 - Anuj Patel

Answer 3

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

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

你可以使用以下代码再次显示它。

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

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

- Anthony M. Powers

---

您可能还想将hideCol()代码绑定到与编辑完成相对应的事件中，或者当用户/编辑器正在进行编辑时。 - Anthony M. Powers

Answer 4

这个帖子可能很旧了，但如果有人遇到同样的问题...我需要从表格的选定行中获取一个值，但我不想显示该行所在的列。我使用了hideCol，但像Andy一样遇到了混乱的问题。为了解决这个问题（称之为hack），我只需重新设置网格的宽度。

jQuery(document).ready(function() {

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

由于行宽是自动的，当我重置表格宽度时，它会重置列宽但不包括隐藏的列，因此它们填补了间隙。

- Aaron

---

尝试在事后使用此方法调整列的大小。 - WEFX

Answer 5

尝试使用 edithidden: true 并执行。

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

或者查看 jqGrid 的维基页面以进行自定义编辑，您可以设置任何输入类型，甚至是标签。

- queen3

Answer 6

隐藏网格列。

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

- softmage99

Answer 7

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

这个函数用于显示和隐藏列。#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
            } });

- Troels