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

时间:2015-05-27 11:48:17

标签: jqgrid free-jqgrid

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

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

1 个答案:

答案 0 :(得分:0)

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

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);
});