【发布时间】：2016-02-24 16:51:28
【问题描述】：
我正在使用 JQGRID 和代码如下
$("#jqGridDel").jqGrid({
url: "Data.aspx/BindInfo",
datatype: 'json',
mtype: 'POST',
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
ajaxSelectOptions: { type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (result) {
alert("hello");
}
},,
colName: ['DelId', 'Name', 'DeliveryName', 'Status'],
colModel: [
{
label: 'Del No',
name: 'DelId',
width: 35
},
{
label: 'Gate',
name: 'Name',
width: 200,
editable: true,
edittype: "select",
foramtter: "Select",
editoptions: {
dataUrl: "Data.aspx/BindDDInfo",
buildSelect: function (data)
{
alert(data);
}
}
},
{
label: 'Delivery',
name: 'DeliveryName',
width: 150,
editable: true
},
{
label: 'Active',
name: 'Status',
width: 40,
editable: true,
align: "center",
formatter: "checkbox",
edittype: "checkbox",
editoptions: { value: '1:0' }
}
],
loadonce: true,
width: 1050,
height: "100%",
pager: "#jqGridDelPager",
caption: "Configuration",
rowNum: 15,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "QGDelId"
},
onSelectRow: function (id) {
if (id && id !== lastSelQGDel) {
lastSelQGDel = id;
}
},
ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
serializeRowData: function (postData) {
return JSON.stringify({ editQGData: postData });
},
editurl: "Data.aspx/SaveData"
});
$('#jqGridDel').navGrid("#jqGridDelPager", { edit: false, add: false, del: false, refresh: false, search: false, view: false });
$('#jqGridDel').inlineNav('#jqGridDelPager',
// the buttons to appear on the toolbar of the grid
{
edit: true,
add: true,
del: true,
refresh: true,
cancel: true,
editParams: {
keys: true,
rowid: lastSelQGDel,
restoreAfterError: true,
reloadAfterSubmit: true,
successfunc: function (result) {
if (result.responseJSON.d == "Success")
alert("Data saved successfully!!");
else
alert("There is some error in data processing");
setTimeout(function () {
$("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}, 50);
}
},
addParams: {
keys: true,
addRowParams: {
successfunc: function (result) {
if (result.responseJSON.d == "Success")
alert("Data saved successfully!!");
else
alert("There is some error in data processing");
setTimeout(function () {
$("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}, 50);
}
}
}
使用以下参考文件..
<script src=”Scripts/jquery-1.11.0.min.js” type=”text/javascript”></script>
<script src=”Scripts/grid.locale-en.js” type=”text/javascript”></script>
<script src=”Scripts/jquery.jqGrid.min.js” type=”text/javascript”></script>
<script src=”Scripts/jquery-ui.min.js” type=”text/javascript”></script>
我能够加载数据并将其从 JQGRID 保存到 SQL 数据库，反之亦然。 但是，选择选项（列：门）没有加载任何数据。我尝试调试代码并了解到在通过 inline-nav 编辑行期间 dataUrl 没有触发。
函数 BindDDInfo 背后的代码（返回类型为 'string' 并提到 Webmethod 和静态）以 <Select> <Option>……</Option> </Select> 格式返回字符串。
<select>
<option value='1'>Text1</option>
<option value='2'>Test2</option>
<option value='3'>Test3</option>
<option value='4'>TEst5</option>
<option value='5'>TEst6</option>
<option value='6'>Test7</option>
<option value='7'>Test8</option>
<option value='8'>Test9</option>
</select>
通过 F12 检查（在 IE9 中），可以看到如下响应标头
Response HTTP/1.1 200 OK
Server ASP.NET Development Server/10.0.0.0
Date Wed, 24 Feb 2016 15:07:16 GMT
X-AspNet-Version 4.0.30319
Cache-Control no-cache, no-store
Pragma no-cache
Expires -1
Content-Type text/html; charset=utf-8
Content-Length 69186
Connection Close
响应正文返回 data.aspx html 页面，不知道出了什么问题。
然后，我在 web.config 文件中添加了 HTTP 处理程序
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
现在，dataUrl 正在点击 webmethod BindDdInfo 并弹出警报（“hello”）（来自 ajaxSelectOptions），但它不会在 editoptions 中构建选择。
以下内容作为响应体返回 {"d":"\u003cselect\u003e\u003c选项值=\u00271\u0027\u003eTest1\u003c/option\u003e\u003c/select\u003e"}
在建议从 BindDDInfo 获取 JSOn 数据后，我修改了如下代码，
我已更改我的 web 方法以返回 List<Dictionary<string, object>> 和以下代码
ajaxSelectOptions: { type: ‘POST’,
contentType: ‘application/json; charset=utf-8’,
datatype: ‘json’,
success: function (result) {
alert(JSON.stringify(result));
}
}
警报显示如下
{“d”:[{“ID”:1,”Name”:”Test1″},{“ID”:2,”Name”:”Test2″}]}
但是，buildSelect 没有被击中，
dataUrl: “Data.aspx/BindDDInfo”,
buildSelect: function (response) {
var data = typeof response === “string” ? JSON.stringify(response) : response,
s = “<select>”;
s += ‘<option value=”0″>–Select–</option>’;
$.each(data, function () {
s += ‘<option value=”‘ + this.ID + ‘”>’ + this.Name + ‘</option>’;
});
return s + “</select>”;
}
在 buildSelect 中尝试了 console.log(response) 和 alert(response)，但没有弹出任何窗口。
谁能帮我从数据库中将数据放入 JQGRID 的下拉列表中。
【问题讨论】：
标签： jquery jqgrid asp.net-ajax free-jqgrid