jqgrid가 편집 상자에서 드롭다운 옵션 값을 잘못 선택했습니다.

편집 양식에서 국가 및 주 값을 올바르게 선택했지만 옵션 값이 주 선택 상자에 표시됩니다. 양식을 편집할 때 올바르지 않습니다. 미국 국가를 선택한 후 다시 영국 국가로 전환해도 이 문제가 지속됩니다.

주 선택 상자의 잘못된 옵션 값 해결 방법

이 문제를 해결하려면 올바른 방법이 필요합니다. 편집 양식이 로드될 때 선택한 국가 값을 기반으로 주 선택 상자를 채웁니다. 접근 방식은 다음과 같습니다.

1. dataInit 함수에서 국가 선택을 기반으로 주 값을 채웁니다.
2. 국가가 변경되면 주 선택 상자를 다시 작성합니다.

코드 솔루션

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 && id !== lastSel) {
            if (lastSel != -1) {
                resetStatesValues();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id, ri, ci) {
        if (id && 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();
              }
          });

Notes

• grid.setColProp(...) 메서드는 열 속성을 설정하는 데 사용됩니다.
• dataInit 함수는 초기화에 사용됩니다. 선택 상자를 선택하고 옵션으로 채웁니다.
• dataEvents 배열은 선택 상자에 이벤트 핸들러를 연결하는 데 사용됩니다.