jqGrid 編集フォームの状態選択ボックスのオプション値が正しくないのはなぜですか?

Linda Hamilton
リリース: 2024-11-01 12:56:02
オリジナル
405 人が閲覧しました

Why are the State select box option values incorrect in my jqGrid edit form?

編集ボックスでの jqgrid の選択ドロップダウン オプション値が間違っています

編集フォームで国と州の値を正しく選択しているにもかかわらず、オプションの値が州選択ボックスに表示されますフォーム編集時に正しくありません。この問題は、米国の国を選択した後に英国の国に戻った場合でも発生します。

州選択ボックスの間違ったオプション値を解決する方法

この問題を解決するには、正しく行う必要があります。編集フォームが読み込まれるときに、選択した国の値に基づいて州選択ボックスに値を入力します。このアプローチには次のものが含まれます。

  1. dataInit 関数での国選択に基づいて州の値を設定します。
  2. 国が変更された場合は州選択ボックスを再構築します。

コード ソリューション

<code class="javascript">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 resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};

$("#list").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) {
                    setStateValues($(elem).val());
                },
                dataEvents: [
                    { type: 'change', fn: function (e) { changeStateSelect($(e.target).val(), e.target); } },
                    { type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } }
                ]
            }
        },
        {
            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: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid','#pager', 
          { edit: true, add: true, del: false, search: false, refresh: false },
          { // edit options
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          },
          { // add options
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          });</code>
ログイン後にコピー

Notes

  • 列のプロパティを設定するには、grid.setColProp(...) メソッドが使用されます。
  • dataInit関数は、選択ボックスを初期化し、オプションを設定するために使用されます。
  • dataEvents 配列は、選択ボックスにイベント ハンドラーを付加するために使用されます。

以上がjqGrid 編集フォームの状態選択ボックスのオプション値が正しくないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート