问题：为什么下拉框不出现在下面的单元格内（即列“value2”）。细胞是空白的。 （其他单元格正确显示正确的值）
对于我的“未经训练”的眼睛，我似乎正在使用正确的技术，如jqgrid演示中所示。
- 但遗憾的是，列中没有下拉框。
（请参阅我的jqgrid配置中的“value2”列）。
jqgrid表配置的哪一部分阻止了下拉窗口小部件出现在单元格中？
注意：我在“输入类型”演示中显示之后对行定义进行了建模.... 即，
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
感谢您的帮助!!
取值
以下是我正在处理的复选框（如下）。我希望同样处理一个下拉列表...（摘录如下）
$("#xyzgrid").jqGrid({
.
.
.
colModel: [
{ name: 'valw',
label: 'valw',
index: 'valw',
width: 50,
formatter: 'checkbox',
editable:true,
edittype:"checkbox",
editoptions: {value: 'true:false'},
formatoptions: {disabled:false}},
],
.
.
.
});
$("#xyzgrid > tbody > tr > td > input[type=checkbox]")
{
$(this).change( function(e){
var t = $(e.target);
var row = t.closest("tbody").children().index(t.closest("tr")); //...row index...
var rowids = $('#xyzgrid').jqGrid('getDataIDs'); //a zero-based array containing rowids of visible rows...
var rowid = rowids[row-1];
var rowdata = $("#xyzgrid").getRowData(rowid);
$("#xyzgrid").jqGrid('setRowData', rowid, rowdata);
});
};
$("#submit").click(function()
{
var gridData1 = $("#xyzgrid").jqGrid('getGridParam', 'data');
var gridData1String = JSON.stringify(gridData1);
$.ajax({
type: "POST",
url: suburl1,
data: "gridData1String=" + gridData1String,
dataType: "text",
async: true,
success: function() {
alert("Submitted");
},
error: function(xhr, ajaxOptions, thrownError) {
alert("xhr status=" + xhr.status);
alert("thrownError=" + thrownError);
}
});
});
var geturl1 = 'data/getGridData1';
$("#abcgrid").jqGrid({
url: geturl1,
mtype: 'POST',
datatype: "json",
jsonReader: {
root: "data",
page: "pageNo",
total: "pages",
records: "rows",
repeatitems: false,
cell: "",
id: "value0"
},
colNames: ['value0', 'value1', 'value2'],
colModel: [
{name: 'value0', index: 'value0', width: 100},
{name: 'value1', index: 'value1', width: 100},
{
name: 'value2',
index: 'value2',
width: 100,
editable: true,
edittype:"select",
editoptions: {value:"AAA:AAA;BBB:BBB;CCC:CCC"}
}
],
rowNum:5,
rowList:[10,20,30],
pager: '#pager',
sortname: 'value1',
viewrecords: true,
sortorder: "desc",
caption:"abctest grid...",
rownumbers: true,
loadonce: true
});
这是我jqgrid的最新“工作”演绎。用户单击“提交”按钮时出现的唯一问题。显然，用户进行的最后一次下拉编辑将行保留为“编辑”模式...因此，此值不包含在发布到服务器的位置...
下面是“工作”代码（感谢AJ和Oleg）......
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>abctest</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.json-2.4.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
var grid = $("#abcgrid").jqGrid({
url: 'data/getGridData1',
mtype: 'POST',
datatype: "json",
cellsubmit: 'clientArray',
editurl: 'clientArray',
cellEdit: true,
jsonReader: {
root: "data",
page: "pageNo",
total: "pages",
records: "rows",
repeatitems: false,
cell: "",
id: "value0"
},
colNames: ['value0', 'value1', 'value2'],
colModel: [
{
name: 'value0',
index: 'value0',
width: 100
},
{
name: 'value1',
index: 'value1',
width: 100
},
{
name: 'value2',
index: 'value2',
width: 100,
stype: 'select',
formatter: 'select',
editable: true,
edittype: "select",
editoptions: {value: "AAA:AAA;BBB:BBB;CCC:CCC"}
}
],
rowNum: 5,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'value1',
viewrecords: true,
sortorder: "desc",
caption: "abctest grid...",
rownumbers: true,
loadonce: true
});
$("#submit").click(function()
{
var gridData1 = $("#abcgrid").jqGrid('getGridParam', 'data');
var gridData1String = JSON.stringify(gridData1);
alert("gridData1String=" + gridData1String);
$.ajax({
type: "POST",
url: 'data/postGridData1',
data: "gridData1String=" + gridData1String,
dataType: "text",
async: true,
success: function() {
reloadgrid($("#abcgrid"));
alert("Submitted");
},
error: function(xhr, ajaxOptions, thrownError) {
alert("xhr status=" + xhr.status);
alert("thrownError=" + thrownError);
}
});
});
});
function reloadgrid(grid)
{
grid.jqGrid('setGridParam', {loadonce: false, datatype: 'json'}).trigger('reloadGrid', [{page: 1}]);
grid.jqGrid('setGridParam', {loadonce: true});
return false;
}
/* ]]> */
</script>
</head>
<body>
<form id="form1">
<div>
<div>
<input type="submit" id="submit" value="Submit Grid Edits" />
</div>
<div>
<table id="abcgrid"></table>
<div id="pager" ></div>
</div>
</div>
</form>
</body>
</html>
答案 0 :(得分：1)
奥列格是对的。我使用你的大部分代码创建了一个short fiddle（除了它在本地加载数据），设置编辑模式，它工作正常。您可能希望从本地加载的版本向后工作到加载JSON的版本，但除非您至少设置cellsubmit或editurl值，否则您不会获得任何正常行为。
以下代码：
<table id="theGrid"></table>
<div id="theGridPager" style="text-align: center"></div>
$("#theGrid").jqGrid({
datatype: 'local',
pager: $("#theGridPager"),
viewrecords: true,
sortname: 'value1',
sortorder: 'desc',
cellsubmit: 'clientArray',
editurl: 'clientArray',
cellEdit: true,
caption: 'the grid',
colNames: ['value0', 'value1', 'value2'],
colModel: [
{ name: 'value0', index: 'value0', width: 100 },
{ name: 'value1', index: 'value1', width: 100 },
{
name: 'value2',
index: 'value2',
width: 100,
editable: true,
edittype: 'select',
editoptions: { value: "AAA:AAA;BBB:BBB;CCC:CCC" }
}
]
});
var gridData = [
{ value0: 'value0 - 1', value1: '1', value2: 'AAA'},
{ value0: 'value0 - 2', value1: '2', value2: 'BBB'},
{ value0: 'value0 - 3', value1: '3', value2: 'CCC'}
];
for (var i = 0; i < gridData.length; i++)
{
$("#theGrid").jqGrid('addRowData', gridData[i].value0, gridData[i]);
}