6

インライン編集を有効にして jqGrid を使用しています。問題は、一部のフィールドの内容が非常に長く、デフォルトではフィールドが使用できるほど大きくないことです:

jqGrid テキストエリア - 現在の様子

私がしたいのは、テキストエリアの固定幅を設定し、フォーカスを取得したときにテーブルの上に表示されるように拡大することです。このようなもの：

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 に投稿しました。上記の提案の実装における最大の問題の 1 つは、 の位置textareaを「絶対」に完全に設定するコードを に移動できないことでしたdataInit。機能リクエストの提案により、それが可能になります。

于 2012-09-05T08:47:09.600 に答える