使用jqGrid 4,为什么在事件处理程序中未定义rowid?

时间:2011-10-24 17:12:03

标签: javascript jquery jqgrid

我在独立网格中使用jqGrid 4.1.2。我正在看一个事件,其中事件处理程序正在接收值为“undefined”作为rowid参数的值。

这是我的初始化代码。

$("#truckGrid").jqGrid({
    url:'/handlers/TruckerCheckDataHandler.ashx',
    datatype: "json",
    colNames:['id','All','VIN', 'Plate', 'Make','Model','Year','RFID #','Description'],
    colModel: [
        {name:'id', index: 'id', hidden:true},
        {name:'action',index:'action', width:25},
        {name:'vin',index:'vin', width:120},
        {name:'plate',index:'plate', width:75},
        {name:'make',index:'make', width:80},
        {name:'model',index:'model', width:80},     
        {name:'year',index:'year', width:40},       
        {name:'rfidNo',index:'rfidNo', width:50},
        {name: 'description', index: 'description', width: 100, sortable: false}                    
    ],
    hidegrid: false,
    jsonReader : {
        root: 'rows',
        repeatitems: false,
        id: 'id',
        page: 'page',
        total: 'total',
        records: 'records'
    },
    nav : {
        edittext: "Edit",
        edittitle: "Edit",
        addtext: "Add Truck",
        addtitle: "Add Truck",
        deltext: "Delete",
        deltitle: "Delete"
    },
    ondblClickRow: function (rowid, iRow, iCol, e) {
        alert(rowid);
    },
    rowNum:10,
    rowList:[10,20,30],
    pager: '#truckPager',
    sortname: 'vin',
    viewrecords: true,
    sortorder: "desc"
});
jQuery("#truckGrid").jqGrid('navGrid','#truckPager',{
    add: true, 
    addfunc: function() {

    },
    del:true, 
    delfunc: function (rowid) {
        alert(rowid);
    },
    editfunc: function (rowid) {
        alert(rowid);
    },
    edit: true, 
    clear:false
});

以下是实际将卡车数据添加到网格的代码。

var _truckList = null;

function truckData (truckId, vin, make, model, year, country, state, plateNum, description, rfid, truckType) {
    return {
        id : truckId,
        vin : vin,
        make : make,
        model : model,
        year : year,
        plateCountry : country,
        plateState : state,
        plateNumber : plateNum,
        description : description,
        rfid : rfid,
        truckType : truckType,
        toJqGridData : function() {
            // [{"DATA_ID":"0", "DATA_DN": "national"}, {"DATA_ID":"1", "DATA_DN": "samsung"}]
                return [{"id":this.id, 'action': '', 'vin':this.vin, 
                    'plate':this.plateCountry + '-' + this.plateState + '-' + 
                    this.plateNumber, 'make':this.make, 'model':this.model, 
                    'year':this.year,'rfidNo':this.rfid, 
                    'description':this.description}]
        }
    };
}


function addTruckData() {
    var addTruck = true;
    var truckVin = $('#truckVin').val();
    if (truckVin.length == 0) {
        return null;
    }

    var rowId = -1;
    var method = '';

    var truck = new truckData (0, truckVin, 
        $('#truckMake').val(), 
        $('#truckModel').val(), 
        $('#truckYear').val(), 
        $('#country').val(), 
        $('#state').val(), 
        $('#truckPlateNumber').val(), 
        $('#truckDescription').val(), 
        $('#truckRfidNo').val(), 
        'OwnerOperator');

    if (_truckList != null) {
        for (var xx = 0; xx < _truckList.length; xx++ ) {
            if (_truckList[xx].vin == truckVin) {
                // The vin is already in the list, update it.
                rowId = xx + 1;
                break;
            }
        }
    }

    if (rowId == -1 && _truckList == null) {
        _truckList = [ truck ];
        rowId = 1;
        method = 'addRowData';
    }
    else if (rowId == -1) {
        rowId = _truckList.length + 1;
        _truckList.push (truck);
        method = 'addRowData';
    }
    else {
        _truckList[rowId - 1] = truck;
        method = 'setRowData';
    }

    var result = $('#truckGrid').jqGrid(method, rowId, truck.toJqGridData());

    if (!result) {
        alert('Operation failed.');
    }

    // resetTruckFields(); <- Resets the UI state by setting the text boxes to ''
    return truck;
}

当双击该行时,事件处理程序将触发,但rowid的值为“undefined”。

    ondblClickRow: function (rowid, iRow, iCol, e) {
        alert(rowid);
    },

我确定我在这里做错了但我不知道它是什么。有什么想法吗?

此时网格未连接到数据处理程序,并且未进行任何调用(如预期的那样)。一切都是在java脚本中本地生成的。

为了进一步增加清晰度,addTruckData()由附加到按钮的代码调用,如下所示:

$(document).ready(function () {
    $('#doIt').click(function () {
        if ($('form').valid()) {
            addTruckData();
        }
    });
});

2 个答案:

答案 0 :(得分:0)

您没有发布任何JSON数据,因此我尝试使用一些虚拟数据重现您的问题。你怎么看the demo我没有成功。我的意思是一切都没有任何问题。所以你的问题应该放在代码的另一部分。

此外,我将设置从jqGrid的nav参数(不存在)移动到navGrid的其他选项,并进行了一些其他最小的更改。如果要打开演示的源代码,可以看到所有内容。

答案 1 :(得分:-1)

在我的头撞到众所周知的墙壁后,我开始工作了。以下是与代码无关的代码差异列表。

    $("#truckGrid").jqGrid({
        // url:resolveUrl('/handlers/TruckerCheckDataHandler.ashx'), <-- Removed because no actual server communication was being utilized.
        datatype: "clientSide", // <-- Should not have been "json", this was happening all client side
        colNames:['id','All','VIN', 'Plate', 'Make','Model','Year','RFID #','Description'],
        colModel: [
            {name:'id', index: 'id', hidden: true},
            {name:'action',index:'action', width:25},
            {name:'vin',index:'vin', width:120},
            {name:'plate',index:'plate', width:75},
            {name:'make',index:'make', width:80},
            {name:'model',index:'model', width:80},     
            {name:'year',index:'year', width:40},       
            {name:'rfidNo',index:'rfidNo', width:50},
            {name: 'description', index: 'description', width: 100, sortable: false}                    
        ],
        datatype: 'local',
        hidegrid: false,
        jsonReader : {
            // root: 'rows',
            repeatitems: false //,
            // id: 'id',
            // page: 'page',
            // total: 'total',
            // records: 'records'
        },
        multiselect : true,
        ondblClickRow: function (rowid) {
            editTruck(rowid);
        },
        rowNum:10,
        rowList:[10,20,30],
        pager: '#truckPager',
        sortname: 'vin',
        viewrecords: true,
        sortorder: "desc"
    });
    $("#truckGrid").jqGrid('navGrid', '#truckPager', {
        edittext: "Edit&nbsp;&nbsp;",
        edittitle: "Edit",
        addtext: "Add Truck&nbsp;&nbsp;",
        addtitle: "Add Truck",
        deltext: "Delete&nbsp;&nbsp;",
        deltitle: "Delete",
        addfunc: function () {
            alert('add');
        },
        delfunc: function (rowid) {
            alert(rowid);
        },
        editfunc: function (rowid) {
            alert(rowid);
        },
        //edit: true,
        clear: false
    });