我对MVC应用程序中绑定jgGrid有2个查询。 1.我无法在成功回调方法上绑定来自控制器的json数据 2. 单击按钮时，我正在从服务器数据加载 jqgrid，但是当我第二次单击时，它没有触发我的服务器代码（在控制器中），只是第一次执行服务器代码。
下面是我的JavaScript代码
function buildGrid() {
// setup custom parameter names to pass to server prmNames: { search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" }, // add by default to avoid webmethod parameter conflicts postData: { searchString: '', searchField: '', searchOper: '' }, // setup ajax call to webmethod datatype: function(postdata) { mtype: "GET", $.ajax({ url: 'PageName.aspx/getGridData', type: "POST", contentType: "application/json; charset=utf-8", data: JSON.stringify(postdata), dataType: "json", success: function(data, st) { if (st == "success") { var grid = jQuery("#list")[0]; grid.addJSONData(JSON.parse(data.d)); } }, error: function() { alert("Error with AJAX callback"); } }); }, // this is what jqGrid is looking for in json callback jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "id", //index of the column with the PK in it userdata: "userdata", repeatitems: true }, colNames: ['Id', 'First Name', 'Last Name'], colModel: [ { name: 'id', index: 'id', width: 55, search: false }, { name: 'fname', index: 'fname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} }, { name: 'lname', index: 'lname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} } ], rowNum: 10, rowList: [10, 20, 30], pager: jQuery("#pager"), sortname: "fname", sortorder: "asc", viewrecords: true, caption: "Grid Title Here" }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }, {}, // default settings for edit {}, // add {}, // delete { closeOnEscape: true, closeAfterSearch: true}, //search {} ) });
var grid = $("#jQGrid"); $("#jQGrid").jqGrid({
//setup custom parameter names to pass to server
prmNames: { search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" },
// add by default to avoid webmethod parameter conflicts
postData: {
'ddlDSVIN': function () {
return $('#ddlDevice :selected').val();
},
'search': function () { return $("#searchId").val(); },
'OEMType': function () { return $('#ddlOEM :selected').text(); },
'frmDate': function () { return fromDate.toDateString(); },
'toDate': function () { return toDate.toDateString(); }
},
datatype: function(postdata) { mtype: "POST",
$.ajax({ url: '/DataIn/DataInSearchResult/', type: "POST", contentType: "application/json; charset=utf-8",
//data: postData,
datatype: "json",
success: function(data, st) {
if (st == "success") {
var grid = jQuery("#jQGrid")[0]; grid.addJSONData(JSON.parse(data.d));
var container = grid.parents('.ui-jqgrid-view');
$('#showgrid').show();
$('#jQGrid').show();
$('#divpager').show();
//container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show();
$("#hideandshow").show();
$("#lblTotal").html($(this).getGridParam("records") + " Results");
$("#hideandshow2").hide();
}
},
error: function(error) { alert("Error with AJAX callback" + error); } }); }, // this is what jqGrid is looking for in json callback
jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "id", //index of the column with the PK in it
userdata: "userdata", repeatitems: true
},
// url: '/DataIn/DataInSearchResult/',
colNames: ["PayloadCorrelationId", "Asset", "Type", "DateReported", "ErrorType", "Error", "Latitude", "Longitude", "Payloadurl"],
colModel: [
{ name: 'CorrelationId', index: 'CorrelationId', jsonmap: 'CorrelationId', hidden: true, width: 2, key: true },
// { name: "", index:'', editable: true, edittype: "checkbox", width: 45, sortable: false, align: "center", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: false } },
{ name: 'Device', jsonmap: 'Device', width: '65px' },
{ name: 'Type', jsonmap: 'Type', width: '65px' },
{ name: 'DateReported', jsonmap: 'DateReported', width: '100px' },
{ name: 'ErrorType', jsonmap: 'ErrorType', width: '85px' },
{ name: 'Error', jsonmap: 'Error', width: '160px' },
{ name: 'Latitude', jsonmap: 'Latitude', width: '78px' }, { name: 'Longitude', jsonmap: 'Longitude', width: '78px' },
{ name: 'Payloadurl', jsonmap: 'Payloadurl', width: '180px', formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } }],
rowNum: 10, rowList: [10, 20, 30],
pager: jQuery("#divpager"), sortorder: "asc",
viewrecords: true, caption: "Grid Title Here"
}).jqGrid('navGrid', '#divpager', { edit: false, add: false, del: false }, {}, // default settings for edit
{}, // add
{}, // delete
{ closeOnEscape: true, closeAfterSearch: true}, //search
{ });
}
上述方法在 document.ready 函数中调用$（documen）.ready（function（） {
("#buttonclick").click(function() {
buildGrid();
});
});
你能请问我的代码出了什么问题吗..因为我需要使用 postData {} 将参数传递给服务方法来搜索按钮单击，但如何将此 postData 发送到 url 并将结果绑定到 JqGrid。
谢谢
拉吉。
不
推荐使用datatype。取而代之的是可以使用datatype: "json".它通知 jqGrid 应该使用 $.ajax 方法为你发出 Ajax 请求。可以使用 jqGrid 的其他选项来指定底层$.ajax请求的选项。
代码中的下一个问题
$(documen).ready(function() {
$("#buttonclick").click(function() {
buildGrid();
});
});
如果用户单击#buttonclick按钮，每次都会调用函数buildGrid。问题是您最初有空表
<table id="jQGrid"></table>
在您的页面上，但在创建网格后（调用$("#jQGrid").jqGrid({...});之后），空表将被转换为相对复杂的潜水和表格结构（见图）。对非空表的第二次调用将被 jqGrid 忽略。这就是为什么第二次单击按钮#buttonclick什么都不做的原因。
您可以通过两种方式解决问题。第一种是在创建网格之前包括$("#buttonclick").jqGrid("GridUnload");。这将是销毁网格并重新创建初始空表。第二种方式好一点。您不能在第二次销毁网格，而是调用$("#buttonclick").trigger("reloadGrid");。它将强制向服务器发出新的 Ajax 请求。
对原始代码进行最小更改将遵循以下内容：
$(documen).ready(function() {
var $grid = $("#jQGrid");
$grid.jqGrid({
//setup custom parameter names to pass to server
prmNames: {
search: "isSearch",
nd: null,
rows: "numRows",
sort: "sortField",
order: "sortOrder"
},
// add by default to avoid webmethod parameter conflicts
postData: {
ddlDSVIN: function () {
return $('#ddlDevice').val();
},
search: function () {
return $("#searchId").val();
},
OEMType: function () {
return $('#ddlOEM')
.find("option")
.filter(":selected")
.text();
},
frmDate: function () {
return fromDate.toDateString();
},
toDate: function () {
return toDate.toDateString();
}
},
mtype: "POST",
url: '/DataIn/DataInSearchResult/',
datatype: "json",
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
loadComplete: function () {
$('#showgrid').show();
$('#jQGrid').show();
$('#divpager').show();
$("#hideandshow").show();
$("#lblTotal").html($(this).getGridParam("records") + " Results");
$("#hideandshow2").hide();
},
jsonReader: {
root: root: function (obj) {
return typeof obj.d === "string" ?
$.parseJSON(obj.d) :
obj.d;
},
total: "totalpages",
records: "totalrecords"
},
colNames: ["PayloadCorrelationId", "Asset", "Type", "DateReported", "ErrorType", "Error", "Latitude", "Longitude", "Payloadurl"],
colModel: [
{ name: 'CorrelationId', hidden: true, width: 2, key: true },
// { name: "", index:'', editable: true, edittype: "checkbox", width: 45, sortable: false, align: "center", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: false } },
{ name: 'Device', width: 65 },
{ name: 'Type', width: 65 },
{ name: 'DateReported', width: 100 },
{ name: 'ErrorType', width: 85 },
{ name: 'Error', width: 160 },
{ name: 'Latitude', width: 78 },
{ name: 'Longitude', width: 78 },
{ name: 'Payloadurl', width: 180, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } }],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#divpager",
sortorder: "asc",
viewrecords: true,
caption: "Grid Title Here"
}).jqGrid('navGrid', '#divpager', { edit: false, add: false, del: false },
{}, // default settings for edit
{}, // add
{}, // delete
{ closeOnEscape: true, closeAfterSearch: true} //search
);
$("#buttonclick").click(function() {
$grid.trigger("reloadGrid");
});
});