jqGrid 叠加问题

Question

在这篇文章之后，我遇到了下一个问题。

在加载数据后，灰色的覆盖层覆盖了页面上除了网格数据以外的所有内容。负责此问题的CSS div id为lui_list。有什么想法如何解决吗？

以下是我运行jqgrid脚本的方法：

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '/Ticket/All/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Hardware', 'Issue', 'IssueDetails', 'RequestedBy', 'AssignedTo', 'Priority', 'State'],
            colModel: [
          { name: 'Id', index: 'Id', key: true, width: 100 },
          { name: 'Hardware', index: 'Hardware', width: 100 },
          { name: 'Issue', index: 'Issue', width: 200 },
          { name: 'IssueDetails', index: 'IssueDetails', width: 200 },
          { name: 'RequestedBy', index: 'RequestedBy', width: 150 },
          { name: 'AssignedTo', index: 'AssignedTo', width: 150 },
          { name: 'Priority', index: 'Priority', width: 100 },
          { name: 'State', index: 'State', width: 100}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/Content/images/',
            caption: 'My first grid'
        });
    }); 
</script>

<h2>My Grid Data</h2>
<table id="list"></table>
<div id="pager"></div>

还有HTML标头：

<link href="/Content/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css"  />
<link href="/Content/ui.jgrid.css" rel="stylesheet" type="text/css"  />
<script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="/Scripts/grid.locale-en.js" ></script>
<script type="text/javascript" src="/Scripts/jquery.jqGrid.min.js" ></script>

非常感谢您的帮助。

- mlusiak

Answer 1

您忘记包含 jqgrid 特定的 CSS 文件！ 包含此文件后，您的问题就解决了。

- hagen

---

哇，我感觉自己太蠢了，竟然没看出来。谢谢你的帮助。 - JasCav

真是烦人啊，没想到一个缺失的 .css 文件会导致灰色叠加层出现。 - whitneyland

这比弄清楚上面的“hideloading”方法为什么不起作用更好地解决了我的问题。很高兴我向下滚动了...谢谢，@hagen！ - Tym Pollack

我一直因为那个灰色叠加层而感到沮丧，让我很头疼。谢谢！ - Bnrdo

我不理解！什么是jqgrid特定的文件？难道不是ui.jgrid.css吗？我已经将其包含进来了，但问题还是没有解决。 - Mark Rucker

Answer 2

我不知道为什么加载结束后叠加层会一直保持显示状态，我只能猜测你可能使用了类似于 jqGrid 加载过程中使用的 "loading" CSS 类。无论原因是什么，你可以很容易地解决这个问题。例如，你只需要使用以下代码隐藏相应的 div 即可：

$( "#div-id" ).hide();

var grid_id = "list"; // jQuery("#list")[0].id;
var hideLoading = function () {
    jQuery("#lui_"+grid_id).hide();
    jQuery("#load_"+grid_id).hide();
}

jQuery("#list").jqGrid({
    // all current options
    loadComplete: function() {
        hideLoading();
    },
    loadError: function() {
        hideLoading();
    }
});

- Oleg

---

嗨，Oleg。再次感谢你的帮助。这确实解决了问题。我会点赞，但是先不要标记为答案——也许其他人能够发现覆盖层没有自动隐藏的问题。 - mlusiak

@kMike 对我来说，覆盖层的问题始于我从jQuery 1.4.1升级到1.5.2。我使用的是jqGrid的3.6.4版本，没有时间切换到4.0.0版本。Oleg的修复方法对我很有效。 - grahamesd