jQgrid filterToolbar завершается неудачно с searchOnEnter

У меня есть открытый веб-сервис, который возвращает данные в формате JSON или XML. Я создал страницу JSP и добавил в jQgrid. Данные отображаются очень хорошо, однако, когда я пытаюсь отфильтровать результаты с помощью filterToolbar, это не удается. Firebug говорит: "TypeError: jQuery.jgrid не определен".

Я прочитал почти все посты на jQuery и jqGrid, и я понятия не имею, почему я получаю эту ошибку. Я использую hibernate и Spring MVC из архетипа appfuse. /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 );

Я открыл инструменты dev с помощью chrome и в консоли поменял jQuery на $j, и он вернул fale. Я не совсем уверен, что он должен возвращать, но строка 307 существует в поле "idcveconfig".

введите описание изображения здесь

Источник

2 ответа

Решение

Привет @Oleg за то, что меня направили в правильном направлении!

Вот полный сценарий для тех, кто может использовать ту же настройку. Я создал веб-приложение, используя Appfuse.org Appfuse Spring MVC и архетип гибернации. Эта инфраструктура поставляется с множеством дополнительных функций, которые помогают сделать это приложение довольно гладким, но документация не говорит о всех включенных функциях.

Appfuse включает в себя оптимизатор веб-ресурсов, который загружает кучу скриптов, я полагаю, для повышения производительности. Эта WRO создает файл сценария с именем "main.js", и этот файл представляет собой комбинацию любых сценариев, загружаемых в WRO.XML. Когда файл main.js загружен, он перезаписывает ваши локальные / защищенные переменные и создает конфликт с jquery, который я загружал.

Я удалил jquery из WRO.xml и EUREKA!!!! оно работает! Следующими моими шагами будет попытка переместить мои скрипты jqgrid в WRO.xml и посмотреть, работает ли это тоже.

Источник

Текущая реализация фильтрации использует глобальные jqGrid, Не может использовать $j который вы установили в noConflict(), Я бы порекомендовал вам включить

<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, Ваш текущий код все еще установлен глобальным jQuery переменная, которая должна использоваться jqGrid. Я пытался использовать очень близкий код с бесплатным JQGrid и не было никаких проблем. Я думаю, что демо, которое вы могли бы подготовить, могло бы прояснить все.

Источник
Другие вопросы по тегам