翻译The column FirstName is editable. When the grid loads, I'm adding a div as a child of the FirstName <td> in every row.
What I want to do
In inline editing mode, if I enter anything in the textfield of FirstName column - the div overlay should appear right below the textfield.
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>"); } } } } }); } }); });Can someone please help?