0

我目前有一个 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');
          });
 });
4

2 回答 2

1

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

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

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

$("#searchlist").jqGrid({

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

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

于 2012-06-27T18:09:01.183 回答
0

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

我建议您将postData函数用作属性（请参阅此处）。例如

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

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

于 2012-06-27T20:21:04.440 回答