6

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

jqGrid textarea - 现在怎么样了

我想要做的是为 textarea 设置一个固定的宽度，并让它在获得焦点时展开以在表格上方可见。像这样的东西：

jqGrid textarea - 我希望它看起来如何

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

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

4

1 回答 1

3

如果我正确理解您的要求，您希望拥有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中。功能请求中的建议将使之成为可能。

于 2012-09-05T08:47:09.600 回答