如何使用 jQuery 切换 jqGrid 显示？ [复制]答案

【问题标题】：How to toggle jqGrid display using jQuery? [duplicate]如何使用 jQuery 切换 jqGrid 显示？ [复制]
【发布时间】：2010-10-08 19:38:41
【问题描述】：

我们有两个 jqGrid 网格 - 我们只想根据用户的输入一次显示一个。

每个网格在显示时都应该出现在屏幕上的相同位置。

实现这一目标的最简单方法是什么？

目前我们只是用<table id="list"></table> 设置了我们的HTML，然后我们用$("#list").jqGrid({... 创建了网格。

【问题讨论】：

标签： jquery jqgrid show-hide

【解决方案1】：

jqGrid 在表格和寻呼机元素上创建一些 div。在您的情况下，包含所有 jqGrid 元素的 div 的 id 是 id="gbox_list" 的 div。

所以要隐藏网格，你可以使用$("#gbox_list").hide(); 并显示它：$("#gbox_list").show();。如果您想使用您需要的其他切换效果，但使用相同的 $("#gbox_list") 对象。

【讨论】：

谢谢。我们还有使用<div id="pager">.. 的寻呼机。寻呼机的 div 名称是什么？另外 - 您可以将两个不同的网格“绑定”到同一个表格和分页器 HTML 元素，然后取消绑定一个并绑定另一个以切换网格吗？
或者这是一个关于寻呼机的愚蠢问题？我们可以只做 $("#pager").hide() 吗？所以要进行切换，我们会隐藏表格 div 和分页器 div，然后显示另一个网格的表格和分页器 div？
@Marcus：寻呼机将被放置在“gbox”内，因此隐藏$("#gbox_list") 也会隐藏相应的寻呼机（jqGrid 定义中使用的寻呼机。我不确定我理解正确地将两个不同的网格“绑定”到同一张表的意思。我建议您不要在网格之间共享任何 DOM 元素。隐藏和显示是一种方式。另一种方式是删除不需要的网格并完全重新创建另一个。您可以尝试不同的方法，然后决定哪种方法最适合您的环境。
如何删除给定的网格，然后重新创建另一个网格？
@Marcus：你可以用不同的方式做到这一点。一种方法是使用GridUnload 或GridDestroy（参见trirand.com/jqgridwiki/…）。另一种是将表格和分页器 div 元素放在一个额外的 div 中：<div id="main"><table id="list"></table><div id="pager"></div></div>，然后仅使用$("#main").empty() 销毁或使用$("#main").html('<table id="list"></table><div id="pager"></div>') 重新创建网格基础元素。要使用分页器 div 从重新创建的表中创建 jqGrid，您可以使用与往常相同的代码。

【解决方案2】：

HTML：

<a href="#" id="click1">Toggle</a>
<table class="list" id="list1"></table>
<table class="list" id="list2" style="display: none;"></table>

JQuery:

$("a#click1").click(function() {
    $("table#list1").toggle();
    $("table#list2").toggle();
});

附言。我想知道 jqGrid 是否可以处理具有 display: none 并因此有效地从 DOM 中删除的项目；如果它不起作用，您可能需要调整 toggle() 函数以改用可见性属性。

$("table.list").toggle(
    function() {
        $(this).css({"visibility": "hidden"});
    },
    function() {
        $(this).css({"visibility: "visible"});
    }
);

【讨论】：