Jqgrid의 입력 열 사용 안 함

Question

$("#list").jqGrid({ 
    url: '/modulos/carga/cargaServiciosTarifa.ashx', 
    datatype: 'xml', 
    mtype: 'GET', 
    colNames: ['Precio Dia', 'Precio Hora','Unidad'], 
    colModel: [ 
       { name: 'preciodia', index: 'preciodia', width: 100, align: 'center', editable: true, sortable: false }, 
       { name: 'preciohora', index: 'preciohora', width: 400, align: 'center', editable: true, sortable: false }, 
       { name: 'Unidad', index: 'TSI_Unidad', width: 100, align: 'center',   editable: true, edittype: 'select', 
         editoptions: { value: "Dia:Dia;Hora:Hora" }, sortable: true } 
       ], 
autoencode: true, 
pager: '#pager', 
rowNum: 20, 
sortname: 'preciohora', 
sortorder: 'asc', 
sortable: true, 
autowidth: false, 
width: 733, 
height: -1, 
shrinkToFit: true, 
viewrecords: true, 
gridview: true, 
caption: 'Listado Servicios asociados a Tarifa', 
postData: {tarId: tarId.val()}, 
editurl: '/modulos/carga/cargaServiciosTarifa.ashx' 
}); 


//Paginador 
     jQuery("#list").jqGrid('navGrid', 
      '#pager', 
      { 
       alerttext: "Seleccione un precio.", 
       add: true, addtitle: "Crear precio", 
       del: true, deltitle: "Eliminar precio", 
       edit: true, edittitle: "Modificar precio", 
       search: false, searchtitle: "Búsqueda", 
       refresh: true, 
       cloneToTop: true 
      }, 
      { width: 360, resize: false, closeAfterEdit: true, recreateForm: true, viewPagerButtons: true }, 
      { width: 360, resize: false, closeAfterAdd: true, recreateForm: true, viewPagerButtons: true }, 
      { }, //Delete action 
      { closeAfterSearch: true, closeOnEscape: true } 
     ); 

두 개의 텍스트 상자와 하나의 선택 옵션을 사용하고 선택 항목 'Hora'를 선택하면 어떻게 'Precio Dia'(첫 번째 텍스트 상자) 열을 비활성화 할 수 있습니까? thrid column), 그리고 다른 방법은 'Precio Dia'를 선택 해제하면 'Hora'를 선택 해제합니다! 내가 만들거나 편집 할 때 (인라인 편집이없고 navGrid를 사용할 때) 이렇게 할 수 있습니까?

html과 같은 속성을 비활성화하여 colModel 정의에 추가 할 수 있습니까?

감사합니다.

Answer 1

select 요소에 change 처리기를 정의 할 수 있다고 생각합니다. 핸들러 내부에서 선택 항목의 현재 선택된 옵션에 따라 첫 x 째 입력 필드를 사용 또는 사용 불가능하게 할 수 있습니다. 양식 편집을 사용하기 때문에 첫 번째 입력 필드의 ID는 첫 번째 열의 이름과 같습니다. 또한 양식을 초기화하는 동안 동일한 작업을 수행해야합니다. 해당 코드는 다음과 같을 것입니다 :

editoptions: { 
    value: "Dia:Dia;Hora:Hora", 
    dataInit : function (elem) { 
     setTimeout(function() { 
      $("#preciodia").prop("disabled", $(elem).val() === "Hora"); 
     }, 50); 
    }, 
    dataEvents: [ 
     { 
      type: 'change', 
      fn: function (e) { 
       $("#preciodia").prop("disabled", $(this).val() === "Hora"); 
      } 
     } 
    ] 
},