jqGrid中的隐藏列

时间:2009-11-02 15:02:30

标签: javascript jquery jqgrid

有没有办法隐藏jqGrid表中的列,但是在表单编辑器模式对话框中编辑行时它是否显示为只读?

7 个答案:

答案 0 :(得分:79)

此功能内置于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} 
               }
             ],
   ...
};

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

答案 1 :(得分:38)

我只想扩展 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>

答案 2 :(得分:22)

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

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

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

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

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

答案 3 :(得分:7)

这个帖子我觉得很老了,但万一其他人偶然发现了这个问题...... 我必须从表的选定行中获取一个值,但我不想显示该行的列。我使用了hideCol,但是和Andy一样,它看起来很麻烦。要修复它(称之为黑客攻击),我只需重新设置网格的宽度。

jQuery(document).ready(function() {

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

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

答案 4 :(得分:1)

尝试使用edithidden:true并执行

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

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

答案 5 :(得分:1)

隐藏网格列

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

答案 6 :(得分:0)

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

显示列/隐藏列的功能。 #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
            } });