【问题标题】：JQGrid: Results are blank when performing a new searchJQGrid：执行新搜索时结果为空白
【发布时间】：2012-06-27 17:53:07
【问题描述】：

我目前有一个 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文件。

更新

这是我对 Oleg 建议的尝试。我肯定错过了什么。我又开始空白了。这是我现在使用的代码。

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

【问题讨论】：

您是否尝试过使用 ."trigger("reloadGrid")"; 重新加载 jqGrid；
我刚刚尝试将 .trigger("reloadGrid") 添加到通话末尾。它显示了加载框，但内容没有改变。我确实找到了解决方案。我会在下面发布。

标签： php jquery jqgrid

【解决方案1】：

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

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

我把搜索库功能放在正上方

$("#searchlist").jqGrid({

这会导致网格完全卸载并重新加载正确的内容。

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

【讨论】：

使用$("#searchlist").trigger("reloadGrid")比使用$("#searchlist").jqGrid('GridUnload')更有效。您应该在之前设置新的postData 或使用postData 属性中的函数（请参阅here）。您应该了解$("#searchlist").jqGrid({...]); 创建列标题和许多其他网格元素。所以你应该创建网格一次关于$("#searchlist").jqGrid({...]);，然后只使用$("#searchlist").trigger("reloadGrid")。
我已经尝试过你所说的，但我又遇到了空白结果的问题。它正在将正确的数据记录到控制台，但我得到一个空白。我没有正确触发重新加载吗？
您应该在搜索后发布完整的服务器响应。此外，您应该修复代码中的一些错误。首先，您应该在使用之前定义所有变量。目前至少使用了searchInfo 和myvar，但之前没有定义。您应该在}) 的末尾添加;，它关闭$(document).ready(function(){，然后将function getSearchData 和$('#searchbutton').click(...); 移动到$(document).ready(function(){...}); 内部。无论如何，您都应该使用 fiddler 或 firebug 来查看确切的 HTTP 请求和响应。
好的。我做了修复。它仍然空白。我已经追踪到 postdata 不知何故丢失了。它将正确的数据跟踪到日志，但 php 返回错误，因为我进行的 mysql 调用没有正确的信息。我的 php 中有这两行： $searchType = $_POST['data']['type']; $searchCriteria = $_POST['data']['criteria'];不知何故，此信息未得到正确处理。
您能否将您的问题附加到搜索时发送到服务器的确切数据以及从服务器返回的数据中？请使用 Fiddler、Firebug 等获取准确的 HTTP 数据。顺便说一下var searchInfo = {}; 和var searchInfo = new Object(); 完全一样。在您的情况下，您可以使用var searchInfo;。这不是您的问题，但不应使用构造 new Object()。与var myvar = new Object(); myvar = getSearchData(); 相同，可以替换为var myvar = getSearchData();。

【解决方案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方法将被调用。因此，您可以返回属性的当前值，并将数据发送到用户在页面上填写一些控件的服务器。

【讨论】：