jqgridfree-jqgrid

Free Jqgrid and custom formatter checkbox


When I click at last column checkbox, nothing happens.

//$.fn.jqm = false;
$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});

$("#Ecran").dialog({
    //dialogClass: 'Ecran',
    autoOpen: false,
    width: 560,
    height: 370,
    modal: true,
    open: function (event, ui) {
        $("#jqGrid").jqGrid({
            url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
            mtype: "GET",
            datatype: "jsonp",
            colModel: [
                { label: 'OrderID', name: 'OrderID', key: true, width: 75 },
                { label: 'Customer ID', name: 'CustomerID', width: 150 },
                { label: 'Order Date', name: 'OrderDate', width: 150 },
                { label: 'Freight', name: 'Freight', width: 150 },
                { label:'Ship Name', name: 'ShipName', width: 150 },
                {name:'ok',index:'ok', width:60,formatter:danu_094,align:'center',search:false}
            ],
            cmTemplate: { width: 80, autoResizable: true },
            autoResizing: { compact: true },
            autoresizeOnLoad: true,
            height: "auto",
            viewrecords: true,
            rownumbers:true,
            //width: 480,
            height: "200",
            rowNum: 30,
            rowList:[5,10,20,30,35],
            pager: "#jqGridPager"
        }).jqGrid("navGrid", { del: true, add: false, edit: false });
    },
    close:function () {}
});
$("#Ecran").dialog("open");

function danu_094 (val, options){
  idrow=options.rowId;
  var checked=(val == 'T') ? "checked='checked'" : "";
  return '<input type="checkbox"' + checked  + ' value="'+ val+ '" id='+ 'prel_'+idrow+' onchange="senddata_094('+idrow+')" /> ';
}

function senddata_094 (id){  //alert(id);
  idelem=$('#prel_'+id);
  if ((idelem).is(':checked'))   idelem.val('T');
  else idelem.val('F');
  var sqldate = "&id="+id+"&preluat="+idelem.val();
  alert(sqldate);
}

For demo please see http://jsfiddle.net/9ezy09ep/22/


Solution

  • It's unclear what you want to do with the code. In any way it contains many errors. For example you use

    function danu_094 (val, options){
      idrow=options.rowId;
        var checked=(val == 'T') ? "checked='checked'" : "";
        return '<input type="checkbox"' + checked  + ' value="'+ val+ '" id='+ 'prel_'+
            idrow+' onchange="senddata_094('+idrow+')" /> ';
    }
    

    where variable idrow is not declared. You should use " checked='checked'" instead of "checked='checked'".

    The next problem: senddata_094 which you use needed be defined as global function. So you have to use for example

    window.senddata_094 = function (id) {
        ...
    }
    

    or

    senddata_094 = function (id){
        ...
    }
    

    where senddata_094 in not defined.

    instead of

    function senddata_094 (id){
        ...
    }
    

    The next problem: you use idelem variable inside of senddata_094.

    By the way you can change ' onchange="senddata_094('+idrow+')" /> ' to ' onchange="senddata_094.call(this,'+idrow+')" /> '. It will initialize this inside of senddata_094 to the checkbox. You can use $(this) instead of $('#prel_'+id) in the senddata_094 function. Thus you will don't need to set any id attribute on the checkbox.

    In the same you don't need to set any onchange attribute at all. Instead of that you can define change event on the grid level. The event handler will be called because of event bubbling:

    $("#jqGrid").bind("change", function (e) {
        var rowid = $(e.target).closest("tr.jqgrow").attr("id");
        alert("changed id=" + rowid);
    });