jqGrid叠加问题

Question

我在this post之后来下一个问题。

加载数据后，灰色覆盖覆盖页面上的所有内容，但网格数据除外。负责的 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>

我们将不胜感激。

Answer 1

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

Answer 2

我不知道为什么加载结束后叠加层仍会显示。我只能假设您在加载 jqGrid 期间使用了一些 CSS 类，例如“加载”。独立于原因，您可以很容易地解决问题。您应该使用以下代码隐藏相应的 div，例如：

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();
    }
});