使用jqGrid进行内联编辑时，在表格上方显示表单控件

Question

我正在使用启用了内联编辑的jqGrid。问题是某些字段的内容很长，默认情况下该字段不够大，无法使用：

我想要做的是为textarea设置一个固定的宽度，并在它获得焦点时将其扩展为在以上表中可见。像这样：

我可以在editoptions:dataInit中为textarea设置CSS，但是如果我只是增加宽度，则textarea的右侧会在表格单元格的末尾被剪掉。我想我可以通过一些聪明的CSS解决这个问题吗？

顺便说一句，我知道弹出式编辑器可能对此更有意义，但客户端坚持认为它仍然是内联编辑器。

Answer 1

如果我正确理解您的要求，您希望textarea更大，作为网格的相应单元格。在这种情况下，我可以建议您将textarea的位置更改为“绝对”。在这种情况下，可以调整大小为textarea并获得类似

的结果

如何看到大textarea将与其他输入控件重叠。为了能够修改所有输入字段并使textarea中的输入更加舒适，我建议另外使用jQuery.resizable()。因此，人们可以调整textarea：

的大小

您将找到相应的演示here。代码中最重要的部分如下：

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;
}

在上面的代码中，我另外使用了诀窍，将焦点设置在点击的单元格上，就像我最初在the answer中所描述的那样。

为了使我的建议与标准jqGrid行为的差异更加明确，我建议将上述演示与显示的the following one进行比较

更新：写完答案后，我将the feature request发布到了trirand。实现上述建议的最大问题之一是，无法将将textarea的位置设置为“绝对”的代码移动到dataInit。功能请求中的建议将使其成为可能。