更新

Question

我目前有一个JQGrid实现。我第一次运行搜索它就可以很好地填充网格。当我再次单击搜索时，即使我使用相同的条件，网格也会刷新空白而不是使用返回的数据。有没有人想过为什么会这样？

这是我的搜索功能：

function searchlibrary(searchInfo){
            if(searchInfo == undefined){
                searchInfo = null;
            }
            $("#searchlist").jqGrid({
            url:'./searchlibrary',
            datatype: 'json',
            mtype: 'POST',
            postData: searchInfo,
            colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
            colModel :[ 
              {name:'resourceName', index:'resourceName', width:374, align:'left'}, 
              {name:'unit', index:'unitID', width:40, align:'center',sortable:true,sorttype:'text'}, 
              {name:'topic', index:'topicID', width:220, align:'center',sortable:true}, 
              {name:'docType', index:'docTypeID', width:97, align:'center',sortable:true}, 
              {name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
              {name: 'resourceID', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", editoptions: {value: "Yes:No"}}
            ],
            rowNum:20,
            sortname: 'resourceName',
            sortorder: 'asc',
            viewrecords: true,
            gridview: true,
            width:878,
            height:251
          });
          $("#searchlist").jqGrid('setLabel','resourceName','',{'text-align':'left','padding-left':'5px'});
        }

网格上方的项目有一个下拉列表。选择一个项目时，会显示包含更多内容的另一个下拉列表，或显示文本框。然后，当用户单击提交按钮时，下拉列表/文本字段的内容由jquery获取并构建对象。调用searchlibrary函数时，该对象将作为searchInfo参数传递。然后将其用作jqgrid调用中的postData。我已经记录以确保传递的对象始终是正确的。出于某种原因，在第一次调用此函数之后的任何内容都会返回空白的jqgrid。另外，只是为了进一步理解被调用的url来检索信息是一个生成json数据的php文件。

更新

这是我对奥列格建议的尝试。我肯定错过了什么。我又得到了空白。这是我现在使用的代码。

$(document).ready(function(){
            $("#searchlist").jqGrid({
                url:'./searchlibrary',
                datatype: 'json',
                mtype: 'POST',
                postData: {data: function(){var myvar = new Object(); myvar = getSearchData(); console.log(myvar); return myvar;}},
                colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
                colModel :[ 
                  {name:'resourceName', index:'resourceName', width:380, align:'left'}, 
                  {name:'unit', index:'unitID', width:40, align:'center',sortable:true,sorttype:'text'}, 
                  {name:'topic', index:'topicID', width:220, align:'center',sortable:true}, 
                  {name:'docType', index:'docTypeID', width:97, align:'center',sortable:true}, 
                  {name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
                  {name: 'select', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", formatter:"checkbox", editoptions: {value: "Yes:No"},formatoptions: {disabled : false}}
                ],
                rowNum:20,
                sortname: 'resourceName',
                sortorder: 'asc',
                viewrecords: true,
                gridview: true,
                width:878,
                height:251
             });
          $("#searchlist").jqGrid('setLabel','resourceName','',{'text-align':'left'});

          function getSearchData(){
                var searchType = $('select[name="searchtype"]').val();
                var searchCriteria = "";
                var searchInfo = new Object();
                if(searchType=="Unit" || searchType=="Topic" || searchType=="Document Type"){
                    searchCriteria = $('select[name="searchcontent_select"]').val();
                } else if(searchType=="Resource Name" || searchType=="Keyword"){
                    searchCriteria = $('input[name="searchcontent_text"]').val();
                }
                searchInfo = {type:searchType, criteria:searchCriteria}
                return searchInfo;
          }

          $('#searchbutton').click(function(ev){
                $("#searchlist").trigger('reloadGrid');
          });
 });

工作解决方案

$(document).ready(function(){
            $("#searchlist").jqGrid({
                url:'./searchlibrary',
                datatype: 'json',
                mtype: 'POST',
                postData: {type: function(){return $('select[name="searchtype"]').val();},
                    criteria: function(){return getSearchData();}
                },
                colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
                colModel :[ 
                  {name:'resourceName', index:'resourceName', width:380, align:'left'}, 
                  {name:'unit', index:'unitID', width:40, align:'center',sortable:true,sorttype:'text'}, 
                  {name:'topic', index:'topicID', width:220, align:'center',sortable:true}, 
                  {name:'docType', index:'docTypeID', width:97, align:'center',sortable:true}, 
                  {name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
                  {name: 'select', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", formatter:"checkbox", editoptions: {value: "Yes:No"},formatoptions: {disabled : false}}
                ],
                rowNum:20,
                sortname: 'resourceName',
                sortorder: 'asc',
                viewrecords: true,
                gridview: true,
                width:878,
                height:251
             });
          $("#searchlist").jqGrid('setLabel','resourceName','',{'text-align':'left'});

          function getSearchData(){
                var searchType = $('select[name="searchtype"]').val();
                var searchCriteria = "";
                var searchInfo;
                if(searchType=="Unit" || searchType=="Topic" || searchType=="Document Type"){
                    searchCriteria = $('select[name="searchcontent_select"]').val();
                } else if(searchType=="Resource Name" || searchType=="Keyword"){
                    searchCriteria = $('input[name="searchcontent_text"]').val();
                }
                searchInfo = {type:searchType, criteria:searchCriteria}
                return searchCriteria;
          }

          $('#searchbutton').click(function(ev){
                $("#searchlist").trigger('reloadGrid');
          });
 });

Answer 1

事实证明解决方案是首先卸载网格。所以我添加了这一行：

$("#searchlist").jqGrid('GridUnload');

我在

上方放置了searchlibrary函数

$("#searchlist").jqGrid({

这会导致网格完全卸载使用适当内容重新加载的内容。

作为一个说明，我找到了解决方案的想法here。

Answer 2

$("#searchlist").trigger("reloadGrid")的使用效果更有效$("#searchlist").jqGrid('GridUnload')。据了解，$("#searchlist").jqGrid({...]);创建了列标题和许多其他网格元素。因此，您应该针对$("#searchlist").jqGrid({...]);创建一次网格，然后仅使用$("#searchlist").trigger("reloadGrid")。

我建议您将postData与函数作为属性使用（请参阅here）。例如

postData: {
    type: function () {
        return $('select[name="searchtype"]').val(); // get some data
    },
    criteria: function () {
        return getSearchData();}
    }
}

如果用户点击'#searchbutton'按钮或对数据进行排序或分页，则每次都会调用type和criteria方法。因此，您可以返回属性的当前值，并将数据发送到用户填写页面上某些控件的服务器。

JQGrid：执行新搜索时结果为空

更新

工作解决方案

2 个答案: