jqGrid에서 편집 양식을 로드할 때 선택한 국가에 따라 올바른 옵션으로 주 드롭다운을 채우는 방법은 무엇입니까?-JS 튜토리얼-php.cn

How to populate the state dropdown with the correct options based on the selected country when loading an edit form in jqGrid?

jqgrid 편집 상자의 드롭다운 옵션 값이 올바르지 않습니다

양식 편집 시 드롭다운 상자 두 개를 사용해야 합니다. 형태. 첫 번째 드롭다운 상자에서는 국가를 선택하고, 두 번째 드롭다운 상자에서는 해당 국가가 속한 주를 선택합니다. 국가 드롭다운 상자의 옵션 값은 국가 ID와 동일하고, 주 드롭다운 상자의 옵션 값은 국가 ID와 관련됩니다. 예:

국가:

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

로그인 후 복사

미국 주:

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

로그인 후 복사

영국 주:

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

로그인 후 복사

영국이 속한 주의 옵션값이 5부터 시작되는 것을 알 수 있다. 편집 레코드에 국가 ID=2(UK) 및 주 ID=6(Oxford)이 포함되어 있으면 편집 양식이 올바르게 표시됩니다. 국가는 영국이고 주는 Oxford입니다. 그런데 상태 드롭다운 상자를 확장해 보면 옵션 텍스트는 올바른데(런던과 옥스퍼드가 표시됨) 옵션 값이 0부터 시작하는 것을 볼 수 있습니다. 올바른 결과는 옵션 값이 5부터 시작해야 한다는 것입니다.

국가 드롭다운을 선택하여 미국으로 변경한 다음 다시 영국으로 변경하면 옵션 값이 올바르게 채워집니다(5부터 시작).

질문: 편집 상자를 사용하여 편집 양식을 로드할 때 국가에 따라 상태 드롭다운 상자의 옵션 값을 올바르게 채우는 방법은 무엇입니까?

답변:

질문에 대한 답변은 '미국 주'와 '영국 주'에 대한 정보를 어디서 얻느냐에 따라 다릅니다. jqGrid는 1) editoptions의 value 매개변수를 사용하거나 2) editoptions의 dataUrl 및 buildSelect 매개변수를 사용하는 두 가지 가능성을 지원합니다. 첫 번째 방법은 로컬 편집이나 옵션 목록이 정적일 수 있는 경우에 가장 적합합니다. 두 번째 방법은 AJAX 요청을 통해 데이터베이스에서 국가에 대한 국가, 주 및 주 정보를 얻을 때 사용됩니다. 다음 예에서는 솔루션의 첫 번째 사례를 보여줍니다(value 매개 변수 사용).

서버 구성 요소에 대한 종속성을 방지하려면 로컬 예를 사용할 수 있습니다. dataInit 함수에서 값을 덮어쓰지만 첫 번째 선택/드롭다운 상자에서 값을 변경한 후 두 번째 선택/드롭다운 상자를 수동으로 다시 작성해야 합니다. 이렇게 하려면 선택 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: 위 코드는 다음을 지원하도록 확장되었습니다.

인라인 편집, 양식 편집, 검색 도구 모음 및 고급 검색
편집 양식의 이전 또는 다음 탐색 버튼
다양한 브라우저 키보드 지원 내 선택 개선(새로 고침 선택 관련 문제 수정) 일부 브라우저에 따라 다름)

최신 버전의 데모는 [여기](http://www.trirand.com/blog/jqgrid/jqgridfromformwithdependentseditboxes.html)에서 찾을 수 있습니다.

다음 수정된 데모 코드:

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

로그인 후 복사

위 내용은 jqGrid에서 편집 양식을 로드할 때 선택한 국가에 따라 올바른 옵션으로 주 드롭다운을 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!