편집 중에 jqGrid 종속 선택 상자에서 잘못된 옵션 값을 수정하는 방법은 무엇입니까?

jqGrid 편집 양식의 종속 선택 상자 옵션

jqGrid를 사용하면 양식 편집을 위한 동적 선택 상자를 만들 수 있습니다. 관련 선택 상자에서 이루어진 선택입니다. 이는 국가를 선택하고 그에 따라 주 옵션을 채우는 등의 시나리오에 유용합니다.

문제: 잘못된 옵션 값

그러나 동적으로 채워진 상태 선택 상자. 상태 선택 상자의 옵션 값은 예상 값인 5 대신 0부터 시작합니다.

해결책: 편집 옵션 재설정 및 수동 재구성

이 문제를 해결하려면 핵심은 jqGrid가 초기화 시 편집 옵션을 한 번만 사용한다는 것을 이해하는 것입니다. 선택한 국가에 따라 상태 선택 상자를 올바르게 채우려면 편집 옵션을 재설정하고 선택 상자를 수동으로 다시 작성해야 합니다.

솔루션 구현 방법은 다음과 같습니다.

1. 편집 옵션 재설정:

   • 페이지 로드 시 상태 선택 상자의 편집 옵션을 정적 값으로 설정합니다.

2. 데이터 변경:

   • 국가 선택 상자가 변경되면 상태 선택 상자 편집 옵션을 정적 값으로 재설정합니다.

3. 선택 상자 다시 작성:

   • 선택한 국가에 따라 주 선택 상자에 대한 새 옵션을 작성합니다.
   • 인라인 편집의 경우 선택 상자를 업데이트하세요. 특정 행.
   • 양식 편집의 경우 편집 양식에서 선택 상자를 업데이트합니다.

4. 상태 값 유지:

   • 국가를 변경하고 상태 선택 상자를 재구축한 후 적절한 편집 옵션 값을 설정하여 선택한 상태가 올바르게 반영되는지 확인하세요.

코드 조각:

<code class="javascript">// Reset the editoptions for the state select box
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states}});
};

// Build new options for the state select box based on the selected country
var changeStateSelect = function (countryId, countryElem) {
    var sc = statesOfCountry[countryId];
    var newOptions = '<option value="">All</option>'; // If needed
    for (stateId in sc) { newOptions += '<option value="' + stateId + '">' + states[stateId] + '</option>'; }
    grid.setColProp('State', { editoptions: { value: statesOfCountry[countryId]} });
    if ($(countryElem).is('.FormElement')) {
        // Form editing
        $(countryElem).closest('form.FormGrid').find("select#state.FormElement").html(newOptions);
    } else {
        // Inline editing
        var row = $(countryElem).closest('tr.jqgrow');
        var rowId = row.attr('id');
        $("select#" + rowId + "_State", row[0]).html(newOptions);
    }
};</code>

결론

편집 옵션을 재설정하고, 상태 선택 상자를 수동으로 다시 작성하고, 선택한 상태 값을 유지함으로써 다음을 수행할 수 있습니다. jqGrid의 편집 양식에 종속 선택 상자에 대한 올바른 옵션 값이 표시되는지 확인하세요.

위 내용은 편집 중에 jqGrid 종속 선택 상자에서 잘못된 옵션 값을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!