我创建了一个搜索框，用户在搜索表单输入框中输入名称或ID，然后返回结果。唯一的问题是它只能工作一次。
以下是我的HTML
<button id="basic-search" class="btn btn-default " type="button" > <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<input type="text" id="basicsearchVal" class="form-control" placeholder="Enter text,." autocomplete="on">
然后我将输入的值“ searchInput ”作为查询字符串url传递给jQgrid
var searchInput = $("#basicsearchVal").val()
SearchData =newURL +"/services-monitor/GetQuickSearch?searchString="+searchInput;
当用户搜索时，它会第一次返回结果。但是当我第二次尝试在搜索表单框中输入新名称或数字时，jqgrid似乎不会更新结果，它只显示旧结果，即使我可以看到更新的用户提交的值正在正确传递给JQgrid ajax调用。
仅在每次返回结果时手动刷新页面
我也在网上按照例子添加了这个。：
$(".search-result").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
jQuery(".search-result").trigger("reloadGrid");
我该怎么做才能解决这个问题？为什么JQgrid不会重新加载并显示更新的结果？
这是我的JS CODE和FIDDLE
var jsonData = [{
"Id": 919,
"CertificateNumber": "4829",
"Name": "1880 Bank",
"FullName": "1880 Bank",
"address": "304 HIGH STREET",
"city": "CAMBRIDGE",
"state": "MD",
"zip": "21613"
}, {
"Id": 6020,
"CertificateNumber": "57899",
"Name": "1st Advantage Bank",
"FullName": "1st Advantage Bank",
"address": "240 SALT LICK ROAD",
"city": "SAINT PETERS",
"state": "MO",
"zip": "63376"
}, {
"Id": 3817,
"CertificateNumber": "22039",
"Name": "1st Bank",
"FullName": "1st Bank",
"address": "201 NORTH WILBUR AVE",
"city": "BROADUS",
"state": "MT",
"zip": "59317"
}, {
"Id": 3054,
"CertificateNumber": "16419",
"Name": "1st Bank & Trust",
"FullName": "1st Bank & Trust",
"address": "710 SOUTH PARK DRIVE",
"city": "BROKEN BOW",
"state": "OK",
"zip": "74728"
}, {
"Id": 4843,
"CertificateNumber": "30367",
"Name": "1st Bank of Sea Isle City",
"FullName": "1st Bank of Sea Isle City",
"address": "4301 LANDIS AVENUE",
"city": "SEA ISLE CITY",
"state": "NJ",
"zip": "08243"
}, {
"Id": 5817,
"CertificateNumber": "57298",
"Name": "1st Bank Yuma",
"FullName": "1st Bank Yuma",
"address": "2799 SOUTH 4TH AVENUE",
"city": "YUMA",
"state": "AZ",
"zip": "85364"
}, {
"Id": 5031,
"CertificateNumber": "32487",
"Name": "1st Cameron State Bank",
"FullName": "1st Cameron State Bank",
"address": "124 SOUTH WALNUT",
"city": "CAMERON",
"state": "MO",
"zip": "64429"
}, {
"Id": 6278,
"CertificateNumber": "58485",
"Name": "1st Capital Bank",
"FullName": "1st Capital Bank",
"address": "5 HARRIS COURT, BLDG N, # NO",
"city": "MONTEREY",
"state": "CA",
"zip": "93940"
}, {
"Id": 5942,
"CertificateNumber": "57657",
"Name": "1st Century Bank, National Association",
"FullName": "1st Century Bank, National Association",
"address": "1875 CENTURY PARK EAST, # 14",
"city": "LOS ANGELES",
"state": "CA",
"zip": "90067"
}, {
"Id": 5666,
"CertificateNumber": "35456",
"Name": "1st Colonial Community Bank",
"FullName": "1st Colonial Community Bank",
"address": "1040 HADDON AVENUE",
"city": "COLLINGSWOOD",
"state": "NJ",
"zip": "08108"
}, {
"Id": 2116,
"CertificateNumber": "11706",
"Name": "1st Community Bank",
"FullName": "1st Community Bank",
"address": "407 THIRD STREET",
"city": "SHERRARD",
"state": "IL",
"zip": "61281"
}, {
"Id": 4381,
"CertificateNumber": "27552",
"Name": "1st Constitution Bank",
"FullName": "1st Constitution Bank",
"address": "2650 ROUTE 130",
"city": "CRANBURY",
"state": "NJ",
"zip": "08512"
}, {
"Id": 5327,
"CertificateNumber": "34393",
"Name": "1st Equity Bank",
"FullName": "1st Equity Bank",
"address": "3956 WEST DEMPSTER STREET",
"city": "SKOKIE",
"state": "IL",
"zip": "60076"
}, {
"Id": 5928,
"CertificateNumber": "57611",
"Name": "1st Equity Bank Northwest",
"FullName": "1st Equity Bank Northwest",
"address": "1330 DUNDEE ROAD",
"city": "BUFFALO GROVE",
"state": "IL",
"zip": "60089"
}, {
"Id": 326,
"CertificateNumber": "1673",
"Name": "1st Financial Bank USA",
"FullName": "1st Financial Bank USA",
"address": "331 N. DAKOTA DUNES BLVD.",
"city": "DAKOTA DUNES",
"state": "SD",
"zip": "57049"
}, {
"Id": 6307,
"CertificateNumber": "58548",
"Name": "1st Manatee Bank",
"FullName": "1st Manatee Bank",
"address": "12215 US HIGHWAY 301 N",
"city": "PARRISH",
"state": "FL",
"zip": "34219"
}, {
"Id": 1220,
"CertificateNumber": "6646",
"Name": "1st National Bank",
"FullName": "1st National Bank",
"address": "730 EAST MAIN STREET",
"city": "LEBANON",
"state": "OH",
"zip": "45036"
}, {
"Id": 647,
"CertificateNumber": "3564",
"Name": "1st National Bank of South Florida",
"FullName": "1st National Bank of South Florida",
"address": "1550 NORTH KROME AVENUE",
"city": "HOMESTEAD",
"state": "FL",
"zip": "33030"
}];
JQGRID代码
window.makeSearchGridAjaxCall = function(detailPageUrl, SearchData, jsondata) {
console.log(" SearchData " + SearchData);
$(".search-result").jqGrid({
url: SearchData,
/**url: "/echo/json/", */
mtype: "POST",
// data: mydata,
datatype: "json",
emptyrecords: "0 records found",
postData: {
json: JSON.stringify(jsondata)
},
success: function(mydata, textStatus, jqXHR) {
console.log(" data :" + mydata);
console.log(" data :" + bmUSearchData);
},
colModel: [
{
name: 'Id',
label: ' Id',
align: 'left',
width: 20,
hidden: true
}, {
name: 'CertificateNumber',
label: 'Cert #',
align: 'center',
width: 30,
search: true,
key: true,
formatter: "showlink",
formatoptions: {
baseLinkUrl: detailPageUrl,
idName: "",
addParam: function(options) {
return "bankid=" + options.rowData.bankId + "";
}
}
},
{
name: 'address',
label: 'Address',
align: 'left',
width: 85,
search: false
}, {
name: 'city',
label: 'City',
align: 'left',
width: 50,
search: false
}, {
name: 'state',
label: 'State',
align: 'left',
width: 20,
search: true
}, {
name: 'zip',
label: 'Zip',
align: 'right',
width: 25,
search: false
},
],
additionalProperties: ["address", "city", "state", "zip"],
subGrid: true,
subGridRowExpanded: function(subgridDivId, rowid) {
var item = $(this).jqGrid("getLocalRow", rowid);
$("#" + $.jgrid.jqID(subgridDivId)).html("<div class=\"col-md-1\"><b>Address: </b></div>" + item.address +
"<br/><div class=\"col-md-1\"><b>City: </b></div>" + item.city + "<br><div class=\"col-md-1\"> <b>Zip: </b></div>" + item.zip + "");
},
iconSet: "fontAwesome",
loadonce: true,
**navOptions: { reloadGridOptions: { fromServer: true } },**
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoResizing: {
compact: true
},
forceClientSorting: true,
sortname: "Symbol",
height: "auto",
caption: "<b>Watch List</b>",
viewrecords: true,
autowidth: true, // set 'true' here
shrinkToFit: true, // well, it's 'true' by default
loadError: function(jqXHR, textStatus, errorThrown) {
var p = $(this).jqGrid("getGridParam"),
$errorDiv = $(this.grid.eDiv),
$errorSpan = $errorDiv.children(".ui-jqgrid-error");
$errorSpan.html("No Data Available");
$errorDiv.show();
if (p.errorDisplayTimeout) {
setTimeout(function() {
$errorSpan.empty();
$errorDiv.hide();
}, p.errorDisplayTimeout);
}
},
});
$(".search-result").jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
});
$(window).resize(function() {
var outerwidth = $('#grid').width();
$('.search-result').setGridWidth(outerwidth); // setGridWidth method sets a new width to the grid dynamically
});
/************************************************************************************/
}
$(document).ready(function() {
var newURL;
var SearchData;
if (document.location.hostname == "localhost") {
newURL = "http://localhost:8080";
} else {
newURL = window.location.protocol + "//" + window.location.host;
}
console.log("URL " + newURL);
var detailPageUrl = "bm_summary_tpl.html";
//var prodUrl ="";
var mydata;
$("#basic-search").click(function(e) {
e.preventDefault();
var searchInput = $("#basicsearchVal").val()
if ($('input:text').val().length == 0) {
alert("Searched clicked and text is empty" + searchInput)
} else {
alert("go to search page " + $('input:text').val());
console.log("SearchData " + SearchData);
$(".search-result").load();
//search-result
console.log(" +searchInput " + searchInput);
SearchData = newURL + "/services-monitor/GetQuickSearch?searchString=" + searchInput;
console.log("bmSearchData " + SearchData);
makeSearchGridAjaxCall(detailPageUrl, SearchData, mydata);
$(".search-result").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
jQuery(".search-result").trigger("reloadGrid");
$("#basicsearchVal").val("");
}
});
})
答案 0 :(得分：0)
我找到了解决方案
起初我尝试了这两个，这在我的情况下没有用。
$("#list").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
$("#list").trigger("reloadGrid", { fromServer: true, page: 1 });
我应用了这个像魅力一样的工具，它清除网格并在每次用户搜索新数据时重新加载数据
$(".search-result").jqGrid('GridUnload');
var searchInput = $("#basicsearchVal").val()
if ($('input:text').val().length == 0) {
alert("Please enter a Name to search")
}
else {
$( "#watchlist-b").remove();
$("#watchList-b1").remove();
$("#watchList-b2").remove();
SearchData =newURL +"/services-monitor/GetQuickSearch?searchString="+searchInput;
makeSearchGridAjaxCall (detailPageUrl,SearchData,mydata);
jQuery(".search-result").trigger("reloadGrid");