我目前有一个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 会获取下拉列表/文本字段的内容并构建一个对象。调用搜索库函数时,该对象将作为 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');
});
});
事实证明,解决方案是先卸载网格。所以我添加了这一行:
$("#searchlist").jqGrid('GridUnload');
我在搜索库功能正上方输入
$("#searchlist").jqGrid({
这会导致网格完全卸载重新加载正确内容的内容。
请注意,我在这里找到了解决方案的想法。
$("#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'
按钮或对数据进行排序或分页时,都将调用type
和criteria
方法。因此,您可以返回属性的当前值,并将数据发送到用户在页面上填写某些控件的服务器。