禁用Jqgrid中的输入列

时间:2012-11-07 16:10:33

标签: jquery jqgrid disabled-input

$("#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 }
        );

有两个文本框和一个选择选项,我想知道如果我选择select(thrid列)的选项'Hora',我会如何禁用'Precio Dia'(第一个文本框)列,另一种方式如果我在选择中选择'Hora',请禁用'Precio Dia'!在创建或编辑时是否有可能这样做(没有内联编辑,我使用navGrid)?

是否有禁用html的属性可以添加到colModel定义?

感谢。

1 个答案:

答案 0 :(得分:1)

我认为您可以在select元素上定义change处理程序。在处理程序内部,您可以根据select中当前选定的选项禁用或启用第一个输入字段。因为您使用表单编辑,所以第一个输入字段的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");
            }
        }
    ]
},