Jquery Jqgrid搜索选项隐藏网格表

问题是当我点击搜索选项（在寻呼机上）时，它会显示搜索窗口，但网格被隐藏。我包括jqmodal.js文件。但是我在下面的代码中忽略了什么

css文件：

$("#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
});

jqModal.css

jquery-ui-1.8.custom.css

ui.jqgrid.css

ui.multiselect.css

jquery.searchFilter.css

js文件：

$("#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
});

jquery.min.js

grid.base.js

grid.common.js

grid.formedit.js

grid.setcolumns.js

ui.multiselect.js

jquery.searchFilter.js

jqModal.js

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:

---

这听起来和我今天遇到的问题一样。搜索表单将显示出来，但将位于网格顶部，并且没有模式窗口将显示使屏幕无用的内容

如果是这种情况，那么您所要做的就是引用jquery.searchFilter.css

在我的一个项目上，它必须在一个代码文件中引用，但在另一个项目上它没有被引用（这给了我一个错误）。我一把css文件添加到页面上，这个问题就消失了

---

希望这能解决您的问题。

我有一个自定义CSS，我删除了一个覆盖div，现在正在工作。

只想分享我对这个特定问题的修复

我正在使用jQGrid的jqueryui。在firebug的帮助下，我看到了问题的根源。我在“jquery-ui-1.8.4.custom.css”的第41行（可能与您的ui版本不同）中对覆盖进行了注释，其中

.ui小部件覆盖{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；}

之后一切都很好