こんにちは、私は jqGrid を初めて使用します。ボタン (検索ボタン) をクリックすると、サーバーからグリッド上のデータをリロードしようとして、フォーラムで多くの投稿を行いました。しかし、それは一度だけ行われます。誰か助けてくれませんか？
<div id="resultGrid">
<table id="datagrid"></table>
</div>
<div id="navGrid"></div>
<script type="text/javascript">
$("#datagrid").jqGrid({
url: 'Home/GridData',
datatype: 'json',
mtype: 'POST',
postData: {
phone: function () { return $("#PhoneTextBox").val(); },
email: function () { return $("#EmailTextBox").val(); }
},
colNames: ['PNR', 'First Name', 'Last Name', 'CountryCode', 'Phone', 'Email', 'Type', 'Action'],
colModel: [
{ name: 'pnr', index: 'pnr', width: 55, editable: false, editoptions: { readonly: true, size: 10 } },
{ name: 'firstname', index: 'firstname', width: 80, editable: false, editoptions: { readonly: true, size: 10 } },
{ name: 'lastname', index: 'lastname', width: 80, editable: false, editoptions: { readonly: true, size: 10 } },
{ name: 'countrycode', index: 'countrycode', width: 100, align: "right", editable: true, editoptions: { readonly: true, size: 10 } },
{ name: 'phone', index: 'phone', width: 80, align: "right", editable: false, editoptions: { readonly: true, size: 10 } },
{ name: 'email', index: 'email', width: 80, align: "right", editable: false, editoptions: { readonly: true, size: 10 } },
{ name: 'type', index: 'type', width: 80, align: "right", editable: false, editoptions: { readonly: true, size: 10 } },
{
name: 'edit', index: 'edit', width: 80, sortable: false,
formatter: function (cellvalue, options, rowObject) {
return "<input style='width:60px;' type='button' value='Edit' " +
"onclick=\"editRow(" + options.rowId + ");\" />";
}
}
],
rowNum: 10,
rowList: [10, 15, 20, 25, 30, 35, 40],
sortname: 'no',
sortorder: "asc",
height: 210,
gridview: true,
viewrecords: true,
caption: "TCD Search Results",
jsonReader: {
total: "total",
page: "page",
records: "records",
root: "rows"
},
gridComplete: resetjson()
});
$(document).ready(function () {
$("#SearchContact").click(function () {
alert($("#PhoneTextBox").val());
$("#datagrid").trigger('reloadGrid');
});
});
function resetjson() {
$("#datagrid").setGridParam({ datatype: 'json', url: 'Home/GridData' }).trigger("reloadGrid");
}
function editRow(i) {
$.ajax({
type: 'POST',
url: 'Home/EditRow',
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function () {
alert('Success');
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
</script>
サーバー側のコードは次のようになります。
public ActionResult GridData(string sidx, string sord, int page, int rows, string phone, string email)
{
if (phone.Equals("5"))
{
var jsonData = new
{
total = 1, // we'll implement later
page = page,
records = 3, // implement later
rows = new[] {
new {id = 1, cell = new[] {"1", "-7", "abcd"}},
new {id = 2, cell = new[] {"2", "15", "efgh"}},
new {id = 3, cell = new[] {"3", "23", "jklm"}}
}
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
else
{
var jsonData = new
{
total = 1, // we'll implement later
page = page,
records = 3, // implement later
rows = new[] {
new {id = 1, cell = new[] {"1", "2", "tbir"}},
new {id = 2, cell = new[] {"2", "4", "mr"}},
new {id = 3, cell = new[] {"3", "6", "pd"}}
}
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
}