선택 상자를 사용하여 열의 편집 가능한 속성을 동적으로 변경합니다.

Question

양식 편집을 사용하고 있습니다. 드롭 다운 상자의 선택에 따라 양식을 추가하고 편집 할 때 특정 필드를 비활성화하고 싶습니다. 이 이벤트를 유발하는 데 가장 좋은 이벤트는 무엇입니까? 나는 dataEvents 사용하여 시도 :

{ name:'type_cd', 
    edittype:'select', 
    editoptions:{ 
     dataUrl:'functions.php', 
      dataEvents:[{ 
       type:'change', 
       fn: function(e){ 
        $(this).setColProp('cntrct_id',{ 
         editoptions:{editable:false} 
        }); 
      } 
     }]       
    } 
}, 

이 내 양식 필드에 가시적 인 영향을주지 않습니다,하지만 난 내가 하나를 넣을 경우에서 경고 메시지를 얻을 수 있기 때문에 도달하고 있다고 알고

. 편집

양식을 제출하면 다음 번에 해당 양식을 열 때 편집 가능 : false로 설정된 열이 나타나지 않습니다. 이것은 올바른 방향으로 나아가는 단계이지만, 즉시으로 편집 가능해야합니다. 실제로는 표시하고 싶지만 비활성화되었습니다 (즉, 사용 중지됨 : true)

Answer 1

우선 dataEvents은 편집 요소의 요소에 콜백을 등록 할 수 있습니다. 콜백 내부에 this이 바인딩 될 DOM 요소로 초기화됩니다. 따라서 $(this) 내부에 change 처리기는 <select> 요소의 래퍼가되고 그리드에는 없습니다. $(this).setColProp의 사용법이 올바르지 않습니다.

추가/편집 양식에서 일부 입력 필드를 사용하지 않으려면 모든 입력 요소가 값 (colModel)과 같은 값인 id을 사용할 수 있습니다. 당신이 cntrct_id의 입력을 중지해야한다면 당신은 editoptions은 기존의 편집 모드 (양식 편집, 인라인 편집 및 전지에 사용되는 것을 이해하는 것이 중요합니다 id="cntrct_id"

{ 
    name: 'type_cd', 
    edittype: 'select', 
    editoptions: { 
     dataUrl: 'functions.php', 
     dataEvents: [{ 
      type: 'change', 
      fn: function (e) { 
       // disable input/select field for column 'cntrct_id' 
       // in the edit form 
       $("#cntrct_id").prop("disabled", true); 
      } 
     }]       
    } 
} 

와 요소에 true에 disabled 속성을 설정할 수 있습니다 편집). 모든 편집 모드를 지원하는 dataEvents 코드를 작성하려면 편집 모드를 감지하고 약간 다른 필드 편집 필드를 사용해야합니다. 코드 (테스트되지 않음)는 다음과 같을 수 있습니다.

{ 
    name: 'type_cd', 
    edittype: 'select', 
    editoptions: { 
     dataUrl: 'functions.php', 
     dataEvents: [{ 
      type: 'change', 
      fn: function (e) { 
       var $this = $(e.target), $td, rowid; 
       // disable input/select field for column 'cntrct_id' 
       if ($this.hasClass("FormElement")) { 
        // form editing 
        $("#cntrct_id").prop("disabled", true); 
       } else { 
        $td = $this.closest("td"); 
        if ($td.hasClass("edit-cell") { 
         // cell editing 
         // we don't need to disable $("#cntrct_id") 
         // because ONLY ONE CELL are edited in cell editing mode 
        } else { 
         // inline editing 
         rowid = $td.closest("tr.jqgrow").attr("id"); 
         if (rowid) { 
          $("#" + $.jgrid.jqID(rowid) + "_cntrct_id") 
           .prop("disabled", true); 
         } 
        } 
       } 
      } 
     }]       
    } 
} 

마지막 설명. prop 메서드를 지원하지 않는 이전 버전의 jQuery (jQuery 1.6 이전)를 계속 사용하는 경우에는 attr을 대신 사용해야합니다.

Answer 2

@Oleg : 이것은 작동하지만 (경보 메시지를받을 수는 있지만) 필드를 비활성화하지 않습니다. 양식 필드에 특수 값을 입력해야합니까?