列FirstName是可编辑的。当网格加载时，我在每行中添加div作为FirstName <td>的子项。
我想做什么
在内嵌编辑模式下，如果我在FirstName列的文本字段中输入任何内容 - div叠加层应显示在文本字段的正下方。
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Grid</title>
<link rel="stylesheet" type="text/css" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="themes/ui.multiselect.css" />
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="plugins/ui.multiselect.js" type="text/javascript"></script>
<script src="plugins/jquery.tablednd.js" type="text/javascript"></script>
<script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>
</head>
<body>
<table id="myjqgrid"></table>
<div id="pager"></div>
<script src="js/test.js" type="text/javascript"></script>
</body>
</html>
JSON
{
"colModel": [
{
"name": "ID",
"label": "ID",
"width": 60,
"align": "left",
"jsonmap": "cells.0.value",
"sortable": true,
"editable": false
},
{
"name": "FirstName",
"label": "FirstName",
"width": 100,
"align": "left",
"jsonmap": "cells.1.value",
"sortable": false,
"editable": true,
"edittype": "text"
},
{
"name": "LastName",
"label": "LastName",
"width": 100,
"align": "left",
"jsonmap": "cells.2.value",
"sortable": false,
"editable": false
}
],
"colNames": [
"ID",
"FirstName",
"LastName"
],
"mypage": {
"outerwrapper": {
"page":"1",
"total":"1",
"records":"20",
"innerwrapper": {
"rows":[
{
"id":"1",
"cells":
[
{
"value":"12345",
"label": "ID"
},
{
"value":"David",
"label": "FirstName"
},
{
"value":"Smith",
"label": "LastName"
}
]
},
{
"id":"2",
"cells":
[
{
"value":"37546",
"label": "ID"
},
{
"value":"Willy",
"label": "FirstName"
},
{
"value":"Peacock",
"label": "LastName"
}
]
},
{
"id":"3",
"cells":
[
{
"value":"62345",
"label": "ID"
},
{
"value":"Kim",
"label": "FirstName"
},
{
"value":"Holmes",
"label": "LastName"
}
]
}
]
}
}
}
}
的jqGrid
$(document).ready(function () {
var serverData = [];
$.ajax({
type: "GET",
url: "test.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#pager",
rowNum: 15,
rowList: [15, 30, 45, 60],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
width: "1406",
height: "auto",
scrolloffset: 0,
loadonce: true,
caption: "My JQGrid",
onSelectRow: function(id){
$("table#myjqgrid").editRow(id, true);
$("input.editable").live("keyup", function(e){
$("div#overlay").show();
});
},
loadComplete: function(){
var x, y, cellProperty, itemRows;
for (x = 0; x < response.mypage.outerwrapper.innerwrapper.rows.length; x++) {
itemRows = response.mypage.outerwrapper.innerwrapper.rows[x];
itemRowsID = response.mypage.outerwrapper.innerwrapper.rows[x].id;
serverData[itemRows.id] = itemRows.cells;
var cellCount = response.mypage.outerwrapper.innerwrapper.rows[x].cells.length;
for (y = 0; y < cellCount; y += 1) {
cellProperty = response.mypage.outerwrapper.innerwrapper.rows[x].cells[y];
var cellLabel = cellProperty.label;
if (cellLabel === "FirstName") {
$("tr#" + itemRowsID + "td[aria-describedby='myjqgrid_" + cellLabel + "']").append("<div style='display:none;position:absolute;z-index:1000' id='overlay'>"+cellProperty.value+"</div>");
}
}
}
}
});
}
});
});
有人可以帮忙吗？
答案 0 :(得分：0)
您当前的代码存在一些问题：
editRow 覆盖具有<input>元素的单元格的完整内容。因此，覆盖div将被删除，并且在调用editRow后无法显示。因此，您必须将叠加div移动到单元格之外的某个位置，或者将叠加层内容中的文本保存到其他位置，并在编辑行的位置动态创建。要将叠加层置于<input>元素下，我建议您使用jQuery UI Position。