jqgrid 和 jquery 选项卡：加载文本不会隐藏答案

【问题标题】：jqgrid and jquery tabs : loading text doesn't hidejqgrid 和 jquery 选项卡：加载文本不会隐藏
【发布时间】：2011-06-10 08:19:55
【问题描述】：

我正在使用 jquery UI 选项卡 (1.8.9)，我的网页中有一些选项卡。

在每个选项卡上，我都有一个 jqGrid 3.8.2，它在页面加载时加载 json 数据。

对于第一个选项卡，一切正常，我看到来自 jqGrid 的 Loading 黄色框，它消失了。但问题是，当我移动到另一个选项卡时，我看到 jqGrid 已加载，但我有来自 JQGrid 的小 loadui 仍然出现在所有隐藏选项卡的 jqgrid 上。刷新隐藏它..

这是一个错误吗？我可以解决什么？或者当我更改标签时有没有办法隐藏它？（我尝试在更改选项卡时隐藏 $(".loading") 但它不起作用..

嗯，一个细节：它只在 IE7 中而不是在 Firefox 或 Chrome 中这样做

谢谢

【问题讨论】：

标签： jquery jquery-ui jqgrid

【解决方案1】：

jqGrid 最多使用两个 div 来显示加载过程。如果loadui 具有默认值'enable'，则使用一个id 前缀为load_ 的div。如果您使用loadui rqual 到'block'，则使用带有前缀lui_ 的id 的附加覆盖div。

例如，如果您将<table> 与id="list" 一起使用，则将在数据加载期间使用的div 的ID 是'load_list' 和另外的'lui_list'（如果loadui:'block'）。此外，在网格加载期间，另一个网格参数$("#list")[0].grid.hDiv.loading 将在网格加载期间设置为true。

因此您可以在jQuery UI tabs 的select 事件处理程序内部实现隐藏和显示加载div。此外，您可以测试$("#grid_id")[0].grid.hDiv.loading 以验证网格是否确实处于加载状态。

您可以阅读有关 jqGrid here 使用的加载潜水的更多信息。

【讨论】：

优秀的答案奥列格，你是最好的:) 我发现 $("#list") 是隐藏的，但它仍然显示在 IE7 中，我不知道为什么。一个技巧是在选项卡选择事件上创建一个 $("#load_list").html("Loading in progress...") 并且它们消失了.. 不干净但它有效
@Fredv：不客气！ Vous êtes les bienvenus！ IE7 问题的一个可能原因可能是您使用的旧 jQuery 版本。我建议您使用 1.5.2 或 1.6.1。我想在处理 JSON 数据的过程中，IE7 中存在异常。您可以使用和调试器来定位问题。例如 Visual Studio 或 Developer Tools 可能会有所帮助。

【解决方案2】：

这样做的原因是因为在 IE 中，如果元素位于隐藏元素中，它不会正确隐藏它。我不确定这会影响所有版本，但肯定是 6 和 7。

无论如何，我发现的解决方法是通过将 jQuery UI 选项卡移出屏幕来隐藏，而不是通过将可见性设置为无。

这是通过更改 ui-tabs-hide 类的 CSS 来完成的。将以下内容添加到包含您的选项卡的页面上的 CSS

.ui-tabs .ui-tabs-hide  
{
    display: block !important; 
    position:absolute;
    left: -99999px;
    top: 0;
}

第一个 .ui 选项卡可以更改为更具体的选择器。

无论如何，更改后加载框应该会按预期消失。

【讨论】：