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

Question

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

我想要做的是为textarea设置一个固定的宽度,并在它获得焦点时将其扩展为在表格上方可见.像这样的东西:

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

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

Answer 1

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

您如何看到大的textarea将与其他输入控件重叠。为了能够修改所有输入字段并使输入textarea更舒适，我建议另外使用jQuery.ressized()。因此，人们将能够调整大小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 行为的差异更加清楚，我建议将上面的演示与下面显示的演示进行比较

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