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

Question

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

//$.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/

Answer 1

不清楚您想对代码做什么。无论如何，它包含许多错误。例如你使用

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){
    ...
}

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

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

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

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