jQgrid filterToolbar 因 searchOnEnter 而失败答案

【问题标题】：jQgrid filterToolbar fails with searchOnEnterjQgrid filterToolbar 因 searchOnEnter 而失败
【发布时间】：2016-06-14 20:31:52
【问题描述】：

我有一个公开的 Web 服务，它以 JSON 或 XML 格式返回数据。我已经设置了一个 JSP 页面并添加到 jQgrid 中。数据显示得很好，但是当我尝试使用 filterToolbar 过滤结果时它失败了。萤火虫说“ TypeError: jQuery.jgrid 未定义".

我已经阅读了几乎所有关于 jQuery 和 jqGrid 的帖子，但我不知道为什么会出现这个错误。我正在从 appfuse 原型运行休眠和 Spring MVC。 /services/api/vulnss 将根据请求的类型返回 xml 或 json。 json 和 XML 都可以很好地填充网格，我可以对所有内容进行排序和分页。

<html>
<head>


        <link href="/resources/css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
        <link href="/resources/css/ui.jqgrid-bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="/resources/css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet" type="text/css"/>





        <script type="text/javascript" src="/resources/js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="/resources/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="/resources/js/jquery.jqGrid.min.js"></script>

</head>

还有脚本部分：

 <script type="text/javascript">

var $j = jQuery.noConflict(); (函数($j){

          $j().ready(function (){
                $j("#jqGrid").jqGrid({
                        url: '/services/api/vulns',
                        mtype: "GET",
                        //styleUI : 'Bootstrap',
                        datatype: "xml",
                        colModel: [
                            { label: 'idcveconfig', name: 'idcveconfig', key: true, width: 75 },
                            { label: 'cveid', name: 'cveid', width: 150 },
                            { label: 'product', name: 'product', width: 150 },
                            { label: 'version', name: 'version', width: 150 },
                            { label:'vendor', name: 'vendor', width: 150 },
                            { label:'vulnsummary', name: 'vulnsummary', width: 150 }
                            ],
                        viewrecords: true,
                        loadonce: true,
                        height: 250,
                        rowNum: 20,
                        gridview: true,
                        pager: "#jqGridPager",
                        caption: "LOading data from server at once",
                        xmlReader : { 
                           root: "List", 
                           row: "item", 
                           //page: "rows>page", 
                           //total: "rows>total", 
                           //records : "rows>records", 
                           repeatitems: false, 
                           //cell: "cell", 
                           //id: "[id]",
                           //userdata: "userdata",

                           } 


                    });
                $j("#jqGrid").filterToolbar({searchOnEnter : true});

                }); 
})( jQuery );

我用 chrome 打开了开发工具，在控制台中我用 $j 交换了 jQuery，它返回了 fale。我不确定它应该返回什么，但字符串 307 存在于“idcveconfig”字段中。

【问题讨论】：

你能把它添加到 jsfiddle 吗？
您使用哪个版本的 jqGrid 以及来自哪个分支的 jqGrid（free jqGrid、Guriddo jqGrid JS 或版本 the wiki）并验证免费 jqGrid 中是否也存在问题？如果问题存在，请提供demo（非最小化jquery.jqgrid.src.js），可用于重现问题。
我使用的是来自 Guriddo 的最新版本，所以是 5.2。切换到免费的 jqGrid 后，我看到一些 UI 的东西清晰了，它在 chrome 上运行得更好。但我仍然在同一个地方失败。但失败更清楚一点。现在它说“Uncaught TypeError: Cannot read property 'getAccessor' of undefined”(String(jQuery.jgrid.getAccessor(this,'idcveconfig')).toUpperCase().substr(0,3) == String("307" ).toUpperCase())"
我将获得一个有效的演示设置并在明天分享。
@BobbyKing：我无法在免费的 jqGrid 中重现该问题。 jqGrid 需要在当前实现中使用 global jQuery，但它会在你的代码中设置。所以可能是其他问题，提供相应demo后才能发现。

标签： jquery jqgrid appfuse

【解决方案1】：

当前的过滤实现使用 global jqGrid。它不能使用您在noConflict() 中设置的$j。我建议你包括

<script type="text/javascript">
    $.jgrid = $.jgrid || {};
    $.jgrid.no_legacy_api = true;
</script>

在jquery.jqGrid.min.js 之前并仅使用jqGrid 方法的样式，仅以$j("#jqGrid").jqGrid("filterToolbar", {searchOnEnter: true}); 形式而不是$j("#jqGrid").filterToolbar({searchOnEnter: true});。它减少了可能的冲突。此外，您应该设置全局 jQuery 变量（如 window.jQuery = $j;）。

更新：我更准确地检查了您的代码，在我看来，您应该对filterToolbar 的使用没有任何问题。您当前的代码仍然设置 global jQuery 变量，jqGrid 需要使用该变量。我尝试使用非常接近的代码和免费的 jqGrid 并且没有问题。我认为你可以准备的演示可以清除所有内容。

【讨论】：

我也试过这个......以防万一。我得到了同样的结果。 “未捕获的 TypeError：无法读取未定义的属性 'getAccessor'”
@BobbyKing: the demo 使用您的代码，我认为没有问题。我使用免费的 jqGrid 4.13.0
谢谢！这有帮助。即使在复制/粘贴您的代码之后，我仍然会收到错误消息，这告诉我我的 webapp 中存在某种冲突。我正在使用运行 Spring MVC 和 Hibernate 的 Appfuse 原型。我认为通过将所有内容包装在一个函数中并将 $ 替换为 $j 可以避免冲突，尤其是在打开 .noConflict 的情况下。
@BobbyKing：不客气！我制作了一些small modifications 的免费 jqGrid 并发布到 GitHub。现在免费的 jqGrid 可以完全隔离工作，无需任何全局 jQuery 变量。我不完全理解您对 Spring MVC 的问题，但如果您准备在线演示，我可以调试（它使用免费 jqGrid 的非最小化 jquery.jqGrid.src.js），我可以帮助您找到原因。跨度>
我正在缩小范围。我正在使用velocity，它在页面周围添加了一些其他JSP 和脚本。当我从他们中排除这个页面时，它工作得很好。所以问题在于这些装饰器 JSP 与 jQuery 冲突，即使 noConflict 已被调用。我正在寻找首先调用 jQuery 并将其置于非冲突模式的 JSP，因为文档中说将第一个调用的 JSP 置于非冲突模式。

【解决方案2】：

感谢@Oleg 让我指出正确的方向！

以下是可能使用相同设置的用户的完整方案。我使用 Appfuse.org Appfuse Spring MVC 和 hibernate 原型创建了一个 webapp。该框架附带大量附加功能，有助于使该应用程序运行得非常流畅，但文档并没有真正讨论其中包含的所有功能。

Appfuse 包含一个加载大量脚本的 Web 资源优化器，我假设它可以提高性能。此 WRO 创建一个名为“main.js”的脚本文件，该文件是加载到 WRO.XML 中的任何脚本的组合。加载 main.js 时，它会覆盖您的本地/受保护变量，并与我正在加载的 jquery 产生冲突。

我从 WRO.xml 和 EUREKA 中删除了 jquery！！！！有用！我的下一步是尝试将我的 jqgrid 脚本移动到 WRO.xml 并查看它是否也有效。

【讨论】：