我是jqgrid的首发。我为加载jqgrid数据编写此代码，并为显示自定义面板papup创建一些图标按钮以进行插入和更新。
$(function () {
$("#txtFullName").autocomplete({
source: function (request, response) {
$.ajax({
url: "AutoCompleteHandler.ashx",
dataType: "json",
data: {
term: request.term,
Person: 1
},
contentType: "application/json",
converters: {
"json json": function (msg) {
return msg.hasOwnProperty('d') ? msg.d : msg;
}
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Label,
value: item.Value,
id: item.Id
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1,
change: function (event, ui) { $("#PersonId").val(ui.item.id); }
});
var grid = $('#list');
grid.jqGrid({
url: 'jQGridHandler.ashx',
editurl: 'jQGridHandler.ashx',
postData: { ActionPage: 'SecurityUser', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
direction: "rtl",
pgtext: "صفحه {0} از {1}",
datatype: 'json',
height: 490,
colNames: ['کد کاربری', 'شماره پرسنلی', 'مدیر؟', 'نام کاربری ', 'رمز عبور', 'قفل؟', 'تاریخ ایجاد', ],
colModel: [
{ name: 'USER_ID', width: 100, sortable: true, hidden: true },
{ name: 'PERSON_ID', width: 200, sortable: true },
{ name: 'USER_TYPE', width: 100, sortable: true, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
{ name: 'USER_NAME', width: 100, sortable: true },
{ name: 'USER_PASSWORD', width: 100, sortable: true },
{ name: 'USER_LOCK', width: 50, sortable: true, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
{ name: 'CREATE_DATE', width: 30, sortable: true, hidden: true },
],
gridview: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'USER_ID',
viewrecords: true,
sortorder: 'ASC',
caption: 'درخواست ها......',
rownumbers: true
});
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: true }, {}, {},
{ url: "JQGridHandler.ashx?ActionPage=SecurityUser&Action=Delete", reloadAfterSubmit: false }, { multipleSearch: true, overlay: false, width: 460 })
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon-plus",
onClickButton: function () {
$("#PersonId").val('');
$("#chkAdmin").attr("checked", 'false');
$("#txtUserName").val('');
$("#txtPassword").val('');
$("#chkActive").attr("checked", 'false');
$("#hdnUserId").val('');
$("#btnUpdate").css("display", 'none');
$("#btnAdd").css("display", 'inline');
$("#POPUP1").dialog({ width: 730 });
},
position: "first"
})
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon ui-icon-pencil",
onClickButton: function () {
$("#PersonId").val('');
$("#chkAdmin").attr("checked", 'false');
$("#txtUserName").val('');
$("#txtPassword").val('');
$("#chkActive").attr("checked", 'false');
$("#hdnUserId").val('');
var myGrid = grid;
var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
$("#PersonId").val(myGrid.jqGrid('getCell', selRowId, 'PERSON_ID'));
$("#chkAdmin").attr("checked", myGrid.jqGrid('getCell', selRowId, 'USER_TYPE'));
$("#txtUserName").val(myGrid.jqGrid('getCell', selRowId, 'USER_NAME'));
$("#txtPassword").val(myGrid.jqGrid('getCell', selRowId, 'USER_PASSWORD'));
$("#chkActive").attr("checked", myGrid.jqGrid('getCell', selRowId, 'USER_LOCK'));
$("#btnAdd").css("display", 'none');
$("#btnUpdate").css("display", 'inline');
$("#hdnUserId").val(myGrid.jqGrid('getCell', selRowId, 'USER_ID'));
$("#POPUP").dialog({ width: 400 });
},
position: "first"
});
function add() {
$.ajax({
url: 'JQGridHandler.ashx',
contentType: "application/json; charset=utf-8",
data: { PERSON_ID: $("#PersonId").val(), USER_TYPE: $("#chkAdmin").is(":checked"),
USER_NAME: $("#txtUserName").val(), USER_PASSWORD: $("#txtPassword").val(),
USER_LOCK: $("#chkActive").is(":checked"), ActionPage: 'SecurityUser', Action: 'Insert'
},
dataType: "json",
success: function (data) {
$("#list").trigger("reloadGrid", [{ current: true}]); ??????
}
});
}
function update() {
$.ajax({
url: 'JQGridHandler.ashx',
contentType: "application/json; charset=utf-8",
data: { USER_ID: $("#hdnUserId").val(), PERSON_ID: $("#PersonId").val(), USER_TYPE: $("#chkAdmin").is(":checked"),
USER_NAME: $("#txtUserName").val(), USER_PASSWORD: $("#txtPassword").val(),
USER_LOCK: $("#chkActive").is(":checked"), ActionPage: 'SecurityUser', Action: 'Update'
},
dataType: "json",
success: function (data) { }
});
}
$("#btnAdd").click(function () {
add();
//$("#list").jqGrid("reloadGrid");
});
$("#btnUpdate").click(function () {
update();
});
});
和html表单用于创建jqGrid和弹出面板
<div>
<table id="list">
</table>
<div id="pager">
</div>
<div id="POPUP" dir="rtl">
<table width="100%" class="tbl">
<tr>
<td>
FullName
</td>
<td>
<input type="text" id="txtFullName" />
</td>
</tr>
<tr>
<td>
PersonId
</td>
<td>
<input type="text" id="PersonId" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="chkAdmin" />IsAdmin?
</td>
</tr>
<tr>
<td>
UserName
</td>
<td>
<input type="text" id="txtUserName" />
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" id="txtPassword" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="chkActive" checked="checked" />IsActive
</td>
</tr>
<tr>
<td colspan="2">
<input id="btnAdd" type="button" value="Add" />
<input id="btnUpdate" type="button" value="Edit" />
<br />
<input id="hdnUserId" type="hidden" />
</td>
</tr>
</table>
</div>
</div>
我想当用户点击btnAdd并在数据库中记录插入jqGrid数据重载（我想要刷新jqGrid数据）。但我得到2个错误
Error: no element found
Source File: http://localhost:1041/Clerance_New/JQGridHandler.ashx?PERSON_ID=1001&USER_TYPE=false&USER_NAME=tttt&USER_PASSWORD=tttt&USER_LOCK=true&ActionPage=SecurityUser&Action=Insert
Line: 1
and
Error: uncaught exception: jqGrid - No such method: reloadGrid
并重新加载?????? line没有在处理程序中运行服务器端代码，我不知道为什么。
请帮帮我。谢谢所有
答案 0 :(得分：4)
我不确定为什么你编写相对复杂的代码而不是使用标准表格编辑，但应该确定一些重要的原因。
代码
$("#list"). $("#list").jqGrid("reloadGrid");
确实是错误的。您出于某种原因评论过的正确代码
$("#list").trigger("reloadGrid", [{current: true}]);
此外，将调用置于您使用的success或$.ajax函数内的相应add请求的update回调中非常重要。
更新：我现在看到您使用了loadonce: true选项。这意味着数据将从服务器加载一次。首次加载后，datatype的值将更改为'local'。网格的下一次重新加载将在本地完成。如果您需要再次从服务器重新加载数据，则必须将datatype重置为初始值（在您的情况下为“json”），然后才重新加载网格。有关详细信息，请参阅the answer。