免费的Jqgrid和自定义格式化复选框

Posted 2021-04-19

当我点击最后一列复选框时，没有任何反应。

//$.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);
}

有关演示，请参阅http://jsfiddle.net/9ezy09ep/22/

答案

目前还不清楚你想用代码做什么。它以任何方式包含许多错误。例如，您使用

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+')" /> ';
}

其中未声明变量idrow。你应该使用" checked='checked'"而不是"checked='checked'"。

下一个问题：您使用的senddata_094需要定义为全局函数。所以你必须使用例如

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

要么

senddata_094 = function (id){
    ...
}

其中senddata_094没有定义。

代替

function senddata_094 (id){
    ...
}

下一个问题：你在idelem中使用senddata_094变量。

顺便说一句，你可以将' onchange="senddata_094('+idrow+')" /> '改为' onchange="senddata_094.call(this,'+idrow+')" /> '。它会将this中的senddata_094初始化为复选框。您可以在$(this)函数中使用$('#prel_'+id)而不是senddata_094。因此，您不需要在复选框上设置任何id属性。

同样，您根本不需要设置任何onchange属性。而不是你可以在网格级别定义change事件。由于事件冒泡，将调用事件处理程序：

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