>웹 프론트엔드 >JS 튜토리얼 >레코드를 편집할 때 jqGrid의 편집 양식에서 선택 상자에 잘못된 옵션 값이 표시되는 이유는 무엇입니까?

레코드를 편집할 때 jqGrid의 편집 양식에서 선택 상자에 잘못된 옵션 값이 표시되는 이유는 무엇입니까?

DDD
DDD원래의
2024-11-01 02:43:28606검색

Why does the edit form in jqGrid display incorrect option values in select boxes when editing records?

편집 상자에서 잘못된 선택 드롭다운 옵션 값

jqGrid에서 양식 편집을 사용할 때 선택 상자에서 잘못된 옵션 값이 나타날 수 있습니다. 기록을 편집할 때. 특히 값은 올바른 시작 값 대신 0부터 시작할 수 있습니다.

문제 설명

다음 시나리오를 고려하십시오.

  • 2개 선택 상자가 있습니다: 국가 및 주.
  • 주 선택 상자 옵션은 선택한 국가에 따라 다릅니다.
  • 예를 들어 "국가: 미국(옵션 값=1)"에는 값이 시작하는 상태 옵션이 있습니다. 1부터("Alabama: 옵션 값=1").

국가가 영국(옵션 값=2)이고 주가 Oxford(옵션 값=6)인 레코드를 편집할 때 편집 양식에는 처음에 올바른 국가와 주가 표시됩니다. 그런데 상태 선택박스를 열면 옵션값이 틀리게 되어 0부터 시작하게 됩니다. 올바른 옵션값은 5부터 시작해야 합니다.

원인

근본 원인은 선택 상자의 편집 옵션 값이 초기화 중에 한 번만 사용된다는 것입니다. 두 번째 선택 상자의 옵션이 첫 번째 선택 상자의 값에 따라 동적으로 채워지는 경우 두 번째 선택 상자의 옵션을 수동으로 업데이트해야 합니다.

해결책

이 문제를 해결하려면 다음 단계를 따르세요.

  1. 두 번째 선택 상자의 초기 옵션 값을 정적 목록(예: 사용 가능한 모든 상태)으로 재설정합니다.
  2. 첫 번째 선택 상자의 값이 변경되면 선택한 국가에 따라 두 번째 선택 상자에 대한 옵션을 다시 작성합니다.
  3. dataEvents를 사용하여 첫 번째 선택 상자의 변경 사항을 처리하고 두 번째 선택 상자의 다시 작성을 트리거합니다.

코드 예

<code class="javascript">resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};
grid.jqGrid({
   // ... other configuration options
   editoptions: {
       value: countries,
       dataEvents: [
           {
               type: 'change',
               fn: function(e) {
                   resetStatesValues();

                   var countryId = $(e.target).val();
                   var sc = statesOfCountry[countryId];
                   var newOptions = '';
                   for (var stateId in sc) {
                       newOptions += '<option value="' +
                                  stateId + '">' +
                                  states[stateId] + '</option>';
                   }

                   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);
                   }
               }
           }
       ]
   }
});</code>

이러한 단계를 구현하여 두 번째 선택 상자의 옵션 값이 선택한 국가를 기준으로 항상 정확한지 확인합니다. 첫 번째 선택 상자입니다.

위 내용은 레코드를 편집할 때 jqGrid의 편집 양식에서 선택 상자에 잘못된 옵션 값이 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.