Question

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

我几乎阅读了关于jQuery和jqGrid的所有帖子，我不知道为什么我会收到此错误。我从appfuse原型运行hibernate和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存在于字段＆＃34; idcveconfig＆＃34;。

Answer 1

当前的过滤实施使用全球 long。它无法使用您在jqGrid中设置的$j。我建议你加入

noConflict()

在<script type="text/javascript"> $.jgrid = $.jgrid || {}; $.jgrid.no_legacy_api = true; </script>之前，并且仅在jquery.jqGrid.min.js而不是$j("#jqGrid").jqGrid("filterToolbar", {searchOnEnter: true});的形式中使用jqGrid方法的使用方式。它减少了可能的冲突。此外，您应该设置全局$j("#jqGrid").filterToolbar({searchOnEnter: true});变量（例如jQuery）。

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

Answer 2

向@Oleg喊道，让我指出正确的方向！

以下是可能使用相同设置的完整方案。我使用Appfuse.org Appfuse Spring MVC和hibernate原型创建了一个webapp。这个框架附带了许多额外的功能，可以帮助使这个应用程序运行得非常流畅，但文档并没有真正谈论所包含的所有功能。

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

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

jQgrid filterToolbar因searchOnEnter

2 个答案: