web-dev-qa-db-ja.com

jqGrid：編集時にフォームフィールドを無効にする

現在、自動販売機などの管理用に設計されたWebアプリケーションを開発しています。このプロジェクトではjQuery、jQuery UI、jqGridを使用することにしました。これにより、高度にカスタマイズ可能な優れたユーザーインターフェイスを簡単に提供できます。
残念ながら、jqGridドキュメントはかなり古く、この優れたプラグインのすべての機能を網羅しているわけではありません。 -in（ドキュメントはかなり貧弱ですが、私はそれが本当に好きだからです）。

とにかく、十分な背景情報があると思います。要点をつかみましょう：
jqGridに組み込まれているナビゲーションバーを使用して、グリッドからアイテムを追加、編集、および削除します。
これはチャームのように機能しますが、1つだけ例外があります。一部のフィールドは、編集モードではなく、新しいアイテムを追加するときにのみ有効（または表示）になる場合があります（非表示または表示する必要があります）。無効）。

例：
私が働いている会社は自動販売機の塔を販売しており、これらの塔にはいくつかの種類（サイズやものが異なる）があります。新しいタワーが場所に追加されてシステムに入力されるときは、タイプを設定する必要があります。ただし、タワーは時間の経過とともに魔法のように変化しないため、このフィールドを後で編集することはできません。

いくつかの初期化パラメータを変更することでこの動作を実現できるかどうか誰かが知っていますか？
おそらく、文書化されていない編集オプション（editoptions）またはフォームオプション（formoptions）ですか？
それとも、これに対する簡単な解決策がありますか？

私はあなたの提案/解決策を聞いてみたいです！
ありがとう=）

jqueryjqgridediting
17
Arno Moonen

要件はさまざまな方法で実装できます。たとえば、beforeShowFormイベント内で、

jQuery("#list").jqGrid({
    colModel: [
        { name: 'Name', width: 200, editable: true },
   //...

}).jqGrid('navGrid','#pager', { edit: true, add: true, del: false},
          { // edit option
              beforeShowForm: function(form) { $('#tr_Name', form).hide(); }
          },
          { // add option
              beforeShowForm: function(form) { $('#tr_Name', form).show(); }
          });

ここで、ID「tr_Name」は「tr_」プレフィックスと「Name」（colModelの列の名前プロパティ）から構成されます。

[〜＃〜]更新された[〜＃〜]： 答え および 別の =編集が初期化される直前にプロパティを動的に変更する方法をもう1つ示します。

UPDATED 2： Free jqGrideditableをコールバック関数または"disabled"として定義できます、 "hidden"または"readonly"。 wiki記事 を参照してください。これにより、同じ要件をより簡単に実装できます。

36
Oleg

フィールドを編集可能にするかどうかにかかわらず、これは、しばらくの間回答を検索した後（行内編集では編集を無効にし、「追加」では許可するため）、必要な回答が見つからなかったためにコーディングを終了したものです。

colModel :[ 
    {name:'id', index:'id', editable:false, ...

    }).navGrid("#pager",{edit:false,add:true,del:false,search:false,refresh:true},
        {}, // edit
        {   
            beforeInitData: function(formid) {
                $("#list").jqGrid('setColProp','id',{editable:true});
            },
            afterShowForm: function (formid) {
                $("#list").jqGrid('setColProp','id',{editable:false});
            },
8
Alz

これは、プレーンでシンプルな無料のjqgridで機能します。

この特定の例では、「追加」フォームでのみ編集できます。

editable: function (options) {
                            // Allow edit only for "add" not for "edit"
                            if (options.mode === "addForm")
                            {
                                return true;
                            }
                            else if (options.mode === "editForm")
                            {
                                return false;
                            }
                            else
                            {
                                return false;
                            }
0
Robert Smith

表示されますが編集できません：

{ // edit option
    beforeShowForm: function(form) {
        $('#col_name', form).attr("disabled", true);
    }
}
0
Husni

次に例を示します。

http://www.ok-soft-gmbh.com/jqGrid/CustomFormEdit.htm

                  beforeShowForm: function(form) {
                     $('#tr_Name', form).hide();
                  }
0
Youssef