Question

我有一个jqGrid调用一个控制器动作（将JSON返回给jqGrid）。当我的网格被填充时，除了“表体”之外的所有内容都被禁用，就像通过某个模态窗口显示表体一样： example http://i53.tinypic.com/zimxk5.png

这是我用来初始化网格的js代码，以及html：

<head>
    <title>Insert</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
    <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" />    
    <script src="/Scripts/EditorHookup.js" type="text/javascript"></script>    
    <script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

   <script type="text/javascript">
      var gridimgpath = '/content/themes/base/images';
      var gridDataUrl = '/Home/JsonPosloviForDate';
      var jsonDate =  "\/Date(1309816800000)\/";      
      var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));      
      $(function () {
         jQuery("#list").jqGrid({
            url: gridDataUrl + '?currDate=' + date.toJSON(),
            datatype: "json",
            mtype: 'GET',
            colNames: ['Šifra posla', 'Vrsta posla', 'Partner', 'Opis', 'Broj sati'],
            colModel: [
               { name: 'SifPosao', index: 'SifPosao', width: 50, align: 'left' },
               { name: 'kratVrstaPosao', index: 'kratVrstaPosao', width: 100, align: 'left' },
               { name: 'nazPartner', index: 'nazPartner', width: 100, align: 'left' },
               { name: 'opis', index: 'opis', width: 100, align: 'left' },
               { name: 'brSati', index: 'brSati', width: 100, align: 'left' },
                     ],
            rowNum: 20,
            rowList: [10, 20, 30],
            imgpath: gridimgpath,
            height: 'auto',
            width: '700',
            pager: jQuery('#pager'),
            sortname: 'SifPosao',
            viewrecords: true,
            sortorder: "desc",
            caption: "Poslovi"
         });
      }); 
   </script>

</head>
<body>
...    
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
...   
</body>

Answer 1

jqGrid有loadui参数，可让您管理网格的阻止方式。您可以尝试使用loadui:'disable'来验证它是您遇到的问题。

然而，你描述的行为似乎很奇怪。 jqGrid使用<div>作为叠加层，div具有名为“loading”的附加类。您应该验证您的CSS是否存在名称冲突，并将其用于其他目的。

顺便提一下，我建议你查看你使用的jqGrid参数和HTML标记。

自jqGrid版本3.5起，将不会使用参数imgpath（请参阅here）。你真的使用复古版的jqGrid吗？如果不是，则应删除imgpath。
您应该从align: 'left'移除属性colModel，因为align的默认值已经'左'（请参阅here）
您应该从class="scroll" cellpadding="0" cellspacing="0"和<table id="list">中删除class="scroll" style="text-align:center;" <div id="pager">。 jqGrid的“复古”版本中需要这些设置，但现在不需要（请参阅here一个HTML示例）。
最好使用pager: '#pager'代替pager: jQuery('#pager')。
最好不要构建url: gridDataUrl + '?currDate=' + date.toJSON()，而是使用两个参数：url: gridDataUrl和postData: {currDate: date.toJSON()}或更好的事件postData: {currDate: function() { return date.toJSON(); } }。如果在postData内使用函数，则会在每次网格加载/刷新时评估属性的值（有关详细信息，请参阅here）。如果您确实需要手动构建url，则需要使用encodeURIComponent或jQuery.param：url: gridDataUrl + '?currDate=' + encodeURIComponent(date.toJSON())或url: gridDataUrl + '?' + jQuery.param({currDate:date.toJSON()})。

你永远不应该使用eval。

更新：我没有在您发送jqGrid CSS的示例中找到。如果我使用以下行替换所有CSS和JavaScript文件的块

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/css/ui.jqgrid.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/js/i18n/grid.locale-en.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/js/jquery.jqGrid.min.js"></script>

所描述的问题不存在。

Answer 2

我遇到了同样的问题并添加了

<link rel="stylesheet" type="text/css" href="http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css" />

现在有效

jqGrid禁用了我的页面的其余部分？

2 个答案: