jqGridで編集フォームをロードするときに、選択した国に基づいて州ドロップダウンに正しいオプションを入力するにはどうすればよいですか?

jqgrid の編集ボックスのドロップダウン オプションの値が正しくありません

フォームを編集するときは、形状。最初のドロップダウン ボックスは国を選択し、2 番目のドロップダウン ボックスは対応する国が属する州を選択します。 [国] ドロップダウン ボックスのオプション値は国の ID に相当しますが、[州] ドロップダウン ボックスのオプション値は国の ID に関連付けられます。例:

国:

美国 (选项值=1)
英国 (选项值=2)

米国の州:

阿拉巴马州 (选项值=1)
加利福尼亚州 (选项值=2)
佛罗里达州 (选项值=3)
夏威夷州 (选项值=4)

イギリス国家:

伦敦 (选项值=5)
牛津 (选项值=6)

イギリス国家のオプション値は、 5が始まります。編集レコードに国 ID=2 (英国) と州 ID=6 (オックスフォード) が含まれている場合、編集フォームは正しく表示されます (国は英国、州はオックスフォード)。ただし、ステータス ドロップダウン ボックスを展開すると、オプションのテキストは正しいことがわかります (ロンドンとオックスフォードが表示されています)。ただし、オプションの値は 0 から始まります。正しい結果は、オプション値が 5 から始まることになります。

国のドロップダウンを選択して米国に変更し、その後英国に戻すと、オプションの値が正しく入力されます (5 から始まります)。

質問: 編集ボックスを使用して編集フォームをロードするとき、国に応じてステータス ドロップダウン ボックスにオプション値を正しく入力するにはどうすればよいですか?

答え:

質問に対する答えは、「米国の州」と「英国の州」の情報をどこで入手するかによって異なります。 jqGrid は 2 つの可能性をサポートしています。1) editoptions の value パラメーターを使用するか、2) editoptions の dataUrl および buildSelect パラメーターを使用します。最初の方法は、ローカル編集、またはオプションのリストが静的な場合に最適です。 2 番目の方法は、AJAX リクエストを通じてデータベースから国、州、および国の州情報を取得する場合に使用されます。次の例は、ソリューションの最初のケース (value パラメーターを使用) を示しています。

サーバー コンポーネントへの依存関係を回避するには、ローカルの例を使用できます。値は dataInit 関数で上書きされますが、最初の選択/ドロップダウン ボックスの値を変更した後、2 番目の選択/ドロップダウン ボックスを手動で再構築する必要があります。これを行うには、選択した HTML 要素の ID がテーブルの行 ID '_' と列名: rowId "_State" で構成されていることを理解する必要があります。さらに、状態 ID を状態名にデコードするには、editoptions の値を初期値にリセットする必要があることが重要です。

以下のサンプル コード:

var countries = { '1': 'US', '2': 'UK' };
var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' };
var statesOfCountry = {
    1: { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
    2: { '5': 'London', '6': 'Oxford' }
};
var mydata = [
    { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
    { id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
    { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
    { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
];

var lastSel = -1;
var grid = jQuery("#list");
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};
grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name: 'Name', width: 200 },
        { name: 'Country', width: 100, editable: true, formatter: 'select',
            edittype: 'select', editoptions: {
                value: countries,
                dataInit: function (elem) {
                    var v = $(elem).val();
                    // 为了拥有与国家对应的选项列表，我们需要暂时更改列属性
                    grid.setColProp('State', { editoptions: { value: statesOfCountry[v]} });
                },
                dataEvents: [
                    {
                        type: 'change',
                        fn: function(e) {
                            // 为了能够保存当前选择的查看结果，列属性值至少应该包含
                            // 当前选定的状态。因此，我们必须将列属性重置为以下值
                            //grid.setColProp('State', { editoptions:{value: statesOfCountry[v]} });
                            //grid.setColProp('State', { editoptions: { value: states} });
                            resetStatesValues();

                            // 根据选定的国家值创建状态选项
                            var v = parseInt($(e.target).val(), 10);
                            var sc = statesOfCountry[v];
                            var newOptions = '';
                            for (var stateId in sc) {
                                if (sc.hasOwnProperty(stateId)) {
                                    newOptions += '<option role="option" value="' +
                                                  stateId + '">' +
                                                  states[stateId] + '</option>';
                                }
                            }

                            // 填充新值到 select/drop-down
                            if ($(e.target).is('.FormElement')) {
                                // 表单编辑
                                var form = $(e.target).closest('form.FormGrid');
                                $("select#State.FormElement", form[0]).html(newOptions);
                            } else {
                                // 内联编辑
                                var row = $(e.target).closest('tr.jqgrow');
                                var rowId = row.attr('id');
                                $("select#" + rowId + "_State", row[0]).html(newOptions);
                            }
                        }
                    }
                ]
            }
        },
        {
            name: 'State', width: 100, editable: true, formatter: 'select',
            edittype: 'select', editoptions: { value: states }
        }
    ],
    onSelectRow: function (id) {
        if (id &amp;&amp; id !== lastSel) {
            if (lastSel != -1) {
                resetStatesValues();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id, ri, ci) {
        if (id &amp;&amp; id !== lastSel) {
            grid.restoreRow(lastSel);
            lastSel = id;
        }
        resetStatesValues();
        grid.editRow(id, true, null, null, 'clientArray', null,
                        function (rowid, response) {  // aftersavefunc
                            grid.setColProp('State', { editoptions: { value: states} });
                        });
        return;
    },
    editurl: 'clientArray',
    sortname: 'Name',
    height: '100%',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    pager: '#pager',
    caption: "使用依赖 select/drop-down 列表（双击编辑）"
}).jqGrid('navGrid','#pager', 
          { edit: true, add: true, del: false, search: false, refresh: false },
          { // 编辑选项
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          },
          { // 添加选项
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          });

更新: 上記のコードは、フォーム編集状況でも適切に動作するように更新されました。 jqGrid はフォーム編集のローカル編集をサポートしていないため、このコードはテストできません。ただし、必要な変更のほとんどを行ったことを願っています。

アップデート 2: 上記のコードは、以下をサポートするように拡張されました:

1. インライン編集、フォーム編集、検索ツールバー、高度な検索
2. 編集フォームの前または次のナビゲーション ボタン
3. 異なるブラウザ内での選択の改善 キーボードのサポート (更新依存関係の選択を修正)一部のブラウザ問題)

デモの最新バージョンは [ここ](http://www.trirand.com/blog/jqgrid/jqgridfromformwithdependseditboxes.html) にあります。

次の変更されたデモ コード:

美国 (选项值=1)
英国 (选项值=2)

以上がjqGridで編集フォームをロードするときに、選択した国に基づいて州ドロップダウンに正しいオプションを入力するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。