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

Question

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

我有一个jqGrid调用一个控制器动作(将JSON返回给jqGrid).当我的网格被填充时,除了"表体"之外的所有内容都被禁用,就像通过某个模态窗口显示表体一样: 例如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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ole*_*leg 5

有jqGrid的loadui参数,允许您管理网格的阻塞方式.您可以尝试使用loadui:'disable'它来验证它是您遇到的问题.

然而你描述的行为似乎很奇怪.jqGrid <div>用作叠加层,div有另外一个名为'loading'的类.您应该验证您的CSS是否存在名称冲突,并将相同的类名用于其他目的.

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

imgpath从jqGrid的3.5版本开始就不会使用该参数(参见此处).你真的使用复古版的jqGrid吗？如果没有,你应该删除imgpath.
你应该删除属性align: 'left',colModel因为默认值align已经是'left'(见这里)
您应该删除class="scroll" cellpadding="0" cellspacing="0"从<table id="list">和class="scroll" style="text-align:center;"从<div id="pager">.jqGrid的"复古"版本需要这些设置,但现在不需要(请参阅此处的HTML示例).
最好用pager: '#pager'而不是pager: jQuery('#pager').
而不是构建url: gridDataUrl + '?currDate=' + date.toJSON()它最好使用两个参数:url: gridDataUrl和/ postData: {currDate: date.toJSON()}或更好的事件postData: {currDate: function() { return date.toJSON(); } }.如果在每个网格加载/刷新时postData都会评估属性值内的函数的使用(有关更多信息,请参见此处).如果你确实想要像你现在一样手动构建你需要使用encodeURIComponent或jQuery.param:或.urlurl: 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>

Run Code Online (Sandbox Code Playgroud)

所描述的问题不存在.

归档时间：	14 年，8 月前
查看次数：	1969 次
最近记录：	13 年，2 月前