Параметр поиска Jqgrid скрывает таблицу сетки

Question

Проблема заключается в том, что когда я нажимаю кнопку поиска (на пейджере), она показывает окно поиска, но сетка становится скрытой. Я включаю файл jqmodal.js. Но что я игнорирую в коде ниже?

CSS файлы:

jqModal.css

JQuery-щ-1.8.custom.css

ui.jqgrid.css

ui.multiselect.css

jquery.searchFilter.css

JS файлы:

jquery.min.js

grid.base.js

grid.common.js

grid.formedit.js

grid.setcolumns. js

ui.multiselect.js

jquery.searchFilter.js

jqModal.js

The Javascript:

$("#list").jqGrid({ 
    url: 'foo_report.php?g=' + $('#fooselect').val() + 
     '&report=1&searchString=null&searchField=null&searchOper=null', 
    datatype: 'json', 
    mtype: 'GET', 
    colNames:['foo1','foo2', 'foo3'], 
    colModel:[ 
     { name:'rows.foobar1', index: 'foobar1', search:true, 
      jsonmap: 'foobar1', width: 150, align: 'left', sortable:true}, 
     { name:'rows.foobar2', index: 'foobar2', 
      jsonmap: 'foobar2', width: 150, align: 'left'}, 
     { name:'rows.foobar3', index: 'foobar3', 
      jsonmap: 'foobar3', width: 240, align: 'left', sortable: true}], 
     pager: '#pager', 
    rowNum: 8, 
    autowidth: true, 
    rowList: [8, 16], 
    sortname: 'foobar1', 
    sortorder: 'asc', 
    viewrecords: true, 
    search : { caption: "Search...", Find: "Find", Reset: "Reset", 
       odata : ['equal', 'not equal', 'less'], 
       groupOps: [ { op: "AND", text: "all" }, 
          { op: "OR", text: "any" }], 
       matchText: " match", 
       rulesText: " rules" }, 
    caption: 'Foobar Data', 
    jsonReader : { root: "rows", 
        repeatitems: false }, 
    height: 350, 
    width: 800 
}); 

HTML:

<table id="list"></table> 
<div id="pager"></div> 

Answer 1

Это звучит как же проблема у меня сегодня. Форма поиска будет отображаться, но будет находиться поверх сетки, и никакое модальное окно не покажет, какое отображение экрана бесполезно.

Если это так, то все, что вам нужно сделать, это ссылка jquery.searchFilter.css

На одном из моих проектов, она должна быть сделана ссылка в одном из файлов кода, но на другом проекте не было (что дало мне ошибку). Как только я добавил файл css на страницу, этот вопрос исчез.

Надеюсь, это исправит вашу проблему.

Answer 2

У меня был пользовательский CSS, я удалил оверлейный div и теперь работает.

Answer 3

Просто хочу поделиться своим исправлением по этой конкретной проблеме.

Я использую пользовательский интерфейс jQuery для jQGrid. С помощью firebug я увидел, откуда возникла проблема. Я прокомментировал оверлей в строке 41 (которая может отличаться от вашей версии ui) «jquery-ui-1.8.4.custom.css», которая гласит:

.ui-widget-overlay {position: absolute; top: 0; left: 0; ширина: 100%; высота: 100%; }

и после этого все отлично работает.