Custom formatter in jqGrid which calls jQuery function

问题

I have a jqGrid with a custom formatter that returns two checkboxes:

jQuery(function($){
    $("#gridAgenda").jqGrid({
    ...
    colModel: [
        ...,
        "asiste",
        ...
    ],
    colModel:[
        ...,  
        {name:'asiste',formatter:asisteFormater},
        ...
    ]
    ...
});
}
function asisteFormater (cellvalue, options, rowObject) {
    return "Sí<input type='checkbox' id='asisteSi'/> No<input type='checkbox' id='asisteNo'/>";
}

$("#asisteSi").click(function () {
    ...
}

But I want to call a jQuery function when any of the two checkboxes are checked, to evaluate which one was checked and calling an ajax function. I think the problem is, that asisteSi does not exist until the jqGrid is created, so I cannot do this.

Can someone help me?

回答1:

You should put the callback attachment into the gridComplete option of the grid definition, just like this:

$('#gridAgenda').jqGrid({
    ...
    gridComplete: function () {
        $("#asisteSi").click(function () {
            // do your deed
        });
    }
});

Supplemental

By the way, if there are multiple rows in the grid, you should not use asisteSi as your id, because it won't be unique in the page, and that causes undefined behaviour.

回答2:

Finally I've solved this way:

gridComplete: function () {
        var rowData = $("#gridAgenda").getRowData();             
        for (var i = 0; i < rowData.length; i++) 
        {               
            var asisteSi="#asisteSi"+rowData[i].id;
            var asisteNo="#asisteNo"+rowData[i].id;             
            $(asisteSi).click(function(){           
                var actualSi = "#"+this.id;
                var actualNo = actualSi.replace("asisteSi","asisteNo");                 
                if($(actualSi).prop('checked')){
                    $(actualNo).prop('checked', false);                 
                }
                //TODO:llamada ajax
            });             
            $(asisteNo).click(function(){           
                var actualNo = "#"+this.id;
                var actualSi = actualNo.replace("asisteNo","asisteSi");
                if($(actualNo).prop('checked')){
                    $(actualSi).prop('checked', false);                     
                }
                //TODO:llamada ajax                 
            });
         }
}

The problem was that $(asisteSi) had the last value when do click, so I had to get the current Id

来源：https://stackoverflow.com/questions/26590560/custom-formatter-in-jqgrid-which-calls-jquery-function

标签

javascript

jquery

checkbox

jqgrid