【问题标题】:Why did jqGrid disable the rest of my page?为什么 jqGrid 禁用了我页面的其余部分?
【发布时间】:2011-07-05 09:58:40
【问题描述】:

我有一个 jqGrid 调用控制器操作(将 JSON 返回到 jqGrid)。 当我的网格被填充时,除了“表格主体”之外的所有内容都被禁用,就好像表格主体通过某个模式窗口显示一样:

这是我初始化网格的 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>

【问题讨论】:

    标签: asp.net-mvc jquery jqgrid


    【解决方案1】:

    jqGrid 的loadui 参数允许您管理网格将如何被阻止。您可以尝试使用loadui:'disable' 来验证是否是您遇到的问题。

    尽管如此,你描述的行为让我觉得很奇怪。 jqGrid 使用&lt;div&gt; 作为覆盖层,并且 div 具有名为“正在加载”的附加类。您应该验证您的 CSS 是否存在名称冲突并将相同的类名用于其他目的。

    顺便说一下,我建议您查看您使用的 jqGrid 参数和 HTML 标记。

    • 参数imgpath自jqGrid 3.5版起将不再使用(参见here)。你真的使用复古版的 jqGrid 吗?如果不是,您应该删除 imgpath
    • 您应该从colModel 中删除属性align: 'left',因为align 的默认值已经是“左”(参见here
    • 您应该从&lt;table id="list"&gt; 中删除class="scroll" cellpadding="0" cellspacing="0",从&lt;div id="pager"&gt; 中删除class="scroll" style="text-align:center;"。在“复古”版本的 jqGrid 中需要这些设置,但现在不需要(参见here 一个 HTML 示例)。
    • 最好使用pager: '#pager' 而不是pager: jQuery('#pager')
    • 与其构造url: gridDataUrl + '?currDate=' + date.toJSON(),不如使用两个参数:url: gridDataUrlpostData: {currDate: date.toJSON()},或者更好的事件postData: {currDate: function() { return date.toJSON(); } }。如果使用postData 内部的函数,则将在每次网格加载/刷新时评估该属性的值(有关更多信息,请参阅here)。如果您确实想像您目前一样手动构建url,您需要使用encodeURIComponentjQuery.paramurl: 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>
    

    所描述的问题不存在。

    【讨论】:

    • 首先,感谢您的全面回答。不幸的是,我没有运气。你说的我都做了。更改了我的 HTML id,删除了所有其他 CSS,仍然相同。我已经尝试过 loadui ,但它似乎没有任何区别。 IE9、FF 和 Chrome 中的行为是相同的 :(。虽然,有时寻呼机被启用,当我移动到下一页时,它被禁用并且一切都被“锁定”了。Firebug 没有显示错误,控制台中没有错误, GET 请求返回正确的 JSON(确实被渲染)。
    • @user819023:如果您有该页面在线并将网址发布给我,我可以查看它并尝试找出原因。如果您在初始加载网格数据期间有覆盖,即使您使用loadui:'disable',则覆盖可能不是来自 jqGrid。您在同一页面上使用了哪些其他插件?
    • 我刚刚将它部署到:161.53.18.3:81/temp(我故意将 Site.css 更改为 Site123.css(不存在)。)
    • @igorludi:我更新了我的答案。在您发送的文件列表中没有 jqgrid.css。取而代之的是奇怪的Site123.htm 文件作为CSS。所有 JavaScript 文件都被重命名,因此很难分析。如果删除您使用的所有 JavaScript 和 CSS 文件并仅包含所需的文件,则所有工作都没有任何问题。
    • 所以我错过了一个 CSS。谢谢奥列格。
    【解决方案2】:

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

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

    现在有效

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-03-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-06-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多