使用jqGrid進行內聯編輯時，在表格上方顯示表單控件

Question

我正在使用jqGrid並啟用了內聯編輯。 問題是某些字段的內容很長，默認情況下該字段不夠大，無法使用：

我想要做的是為textarea設置一個固定的寬度，並在它獲得焦點時將其擴展為在表格上方可見。 像這樣的東西：

我可以在editoptions:dataInit設置textarea的CSS editoptions:dataInit ，但是如果我只是增加寬度，則textarea的右側會在表格單元格的末尾被剪掉。 我想我可以用一些聰明的CSS解決這個問題嗎？

順便說一下，我知道彈出式編輯器可能對此更有意義，但客戶端堅持認為它仍然是內聯編輯器。

Answer 1

如果我正確理解您的要求，您希望將textarea作為網格的相應單元格。 在這種情況下，我可以建議你將textarea位置改為“絕對”。 在這種情況下，人們可以調整大小到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行為的差異更加明確我建議將上面的演示與下面的演示進行比較

更新 ：寫完答案后，我將功能請求發布到trirand。 實現上述建議的最大問題之一是，無法將設置textarea位置的代碼移動到“絕對”完全填入dataInit 。 功能請求中的建議將使其成為可能。