使用jqGrid进行内联编辑时，在表格上方显示表单控件
我正在使用jqGrid并启用了内联编辑。 问题是某些字段的内容很长，默认情况下该字段不够大，无法使用：
我想要做的是为textarea设置一个固定的宽度，并在它获得焦点时将其扩展为在表格上方可见。 像这样的东西：
我可以在editoptions:dataInit为textarea设置CSS，但是如果我只是增加宽度，则textarea的右侧会在表格单元格的末尾被剪掉。 我想我可以用一些聪明的CSS解决这个问题吗？
顺便说一句，我知道一个弹出式编辑器可能对此更有意义，但客户端坚持认为它仍然是一个内联编辑器。
如果我正确理解了您的要求，您希望将textarea作为网格的相应单元格。 在这种情况下，我可以建议你将textarea位置改为“绝对”。 在这种情况下，人们可以resize到textarea并得到像
如何看到大型textarea将与其他输入控件重叠。 为了能够修改所有输入字段并使textarea的输入更加舒适，我建议另外使用jQuery.resizable（） 。 因此，人们可以调整textarea大小：
你会在这里找到相应的演示。 代码中最重要的部分如下：
onSelectRow: function (rowid, status, e) { var $this = $(this); if (rowid !== lastSel) { if (lastSel) { $(this).jqGrid('saveRow', lastSel); } lastSel = rowid; } $this.jqGrid('editRow', rowid, { keys: true, oneditfunc: function(id) { var $textareas = $("#" + id + " textarea"); $textareas.each(function() { var $textarea = $(this); $textarea.css({position: "absolute", zIndex: "auto", width: "200px"}); $textarea.position({ of: $textarea.parent(), my: "left top", at: "left top", offset: "1 1" }); $textarea.resizable(); // now we fix position of the resizable wrapper which is // the parent of the textarea after calling of .resizable() $textarea.parent().css({ "padding-bottom": "0px", "padding-right": "0px" }); // change focus to the control from the clicked cell $("input,select,textarea", e.target).focus(); }); } }); return true; }
在上面的代码中，我另外使用了技巧，将焦点设置在点击的单元格上，就像我在答案中最初描述的那样。
为了使我的建议与标准jqGrid行为的差异更加明确，我建议将上面的演示与下面的演示进行比较
更新 ：写完答案后，我将function请求发布到trirand。 实现上述建议的最大问题之一是，无法将设置textarea位置的代码移动到“绝对”完全填入dataInit 。 function请求中的建议将使其成为可能。