jQgrid filterToolbar 因 searchOnEnter 而失败

Question

我有一个暴露的 Web 服务，returns 数据在 JSON 或 XML 中。我已经设置了一个 JSP 页面并添加到 jQgrid 中。数据显示得很好，但是当我尝试使用 filterToolbar 过滤结果时，它失败了。 Firebug 说“ 类型错误：jQuery.jgrid 未定义”。

我几乎每个 post 都阅读了 jQuery 和 jqGrid，但我不知道为什么会出现此错误。我是来自 appfuse 原型的运行 hibernate 和 Spring MVC。 /services/api/vulnss 将 return 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 并且它 return 失败了。我不确定它应该是什么 return，但字符串 307 存在于字段 "idcveconfig".

中

Answer 1

当前的过滤实现使用全局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 一起使用，但没有遇到任何问题。我认为您可以准备的演示可以清除所有内容。

Answer 2

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

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

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

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

jQgrid filterToolbar 因 searchOnEnter 而失败

jQgrid filterToolbar fails with searchOnEnter

jquery

appfuse

jqgrid