使用jqGrid进行内联编辑时，在表上方显示表单控件 [英] Display form controls above table when inline editing with jqGrid

问题描述

我使用jqGrid与内联编辑启用。问题是，一些字段的内容很长，并且默认情况下字段不够大，不能使用：

我想要做的是设置固定宽度对于文本区域，并且当它获得焦点时，它扩展为在表上方可见的 。像这样：

我可以在 editoptions：dataInit 中设置textarea的CSS，宽度，文本区域的右侧被截断在表单元格的末尾。我想我可以用一些聪明的CSS解决这个问题。

BTW，我知道一个弹出的编辑器可能会更有意义，但客户坚持，一个内联编辑器。

解决方案

如果我正确理解你的要求，你想有 textarea 作为网格的相应单元格较大。在这种情况下，我可以建议你将 textarea 的位置更改为absolute。在这种情况下，您可以调整为 textarea ，并具有

如何查看大型 textarea 将与其他输入控件重叠。为了能够修改所有输入字段，并使输入 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绝对，zIndex：auto，width：200px}）; 
 $ textarea.position（{
 of：$ textarea.parent（），
 my： ，
 at：left top，
 offset：1 1
}）; 
 $ textarea.resizable（）; 
 //现在我们固定位置的可调整大小的包装器是
 //在调用.resizable（）后的textarea的父代。
 $ textarea.parent（）。css（{
padding-bottom：0px ，
padding-right：0px
}）; 
 //将焦点从点击的单元格改变为控件
 $（input，select，textarea ，e.target）.focus（）; 
}）; 
} 
}）; 
 return true; 
} 
  

在上面的代码中，我使用了额外的技巧，就像我最初在到trirand。实现上述建议的最大问题之一是，不能将设置 textarea 的位置的代码移动到absolutefull到 dataInit 。功能请求中的建议将使其成为可能。

I'm using jqGrid with inline editing enabled. Problem is that the contents of some of the fields are quite long, and by default the field is not large enough to be usable:

What I want to do is set a fixed width for the textarea, and have it expand to be visible above the table when it gets focus. Something like this:

I can set the CSS for the textarea in editoptions:dataInit, but if I just increase the width, the right hand side of the textarea gets clipped off at the end of the table cell. I guess I can fix this with some clever CSS?

BTW, I know that a popup editor would probably make more sense for this, but the client is insisting that it remains an inline editor.

解决方案

If I understand your requirements correctly you want to have textarea which are larger as the corresponding cell of the grid. In the case I could suggest you to change position of textarea to "absolute". In the case one can resize to textarea and have results like

How you can see the large textarea will overlap the other input controls. To make able to modify all input fields and to make the input in textarea more comfortable I suggest additionally to use jQuery.resizable(). So one will be able to resize the textarea:

You will find the corresponding demo here. The most important part of the code is below:

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

In the above code I used additionally the trick with setting focus on the clicked cell like I described originally in the answer.

To make the differences of my suggestions to the standard jqGrid behavior more clear I suggest to compare the above demo with the following one which display

UPDATE: After writing of the answer I posted the feature request to trirand. One of the most problems in the implementation of the above suggestion was that one can't move the code which set position of textarea to "absolute" full into dataInit. The suggestion in the feature request will make it possible.

这篇关于使用jqGrid进行内联编辑时，在表上方显示表单控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！