this.p 是未定义的 jqgrid

Question

我有一个有趣的问题。我已经在具有多个网格的多个页面上完成了此操作。第一个网格工作正常，在这种情况下第二个网格无法加载。并给出以下错误：

this.p 未定义

...sArray(i)){P=true;h="last";U=f}else{i=[i];P=false}this.each(function(){var D=i.l. .. 第 140 行 jquery.jqGrid.min.js

用户双击一行并设置一些变量，然后调用函数 locationGrid()。

就像我说的那样，这在过去曾多次对我有用，但是在此页面上却失败了。我已经仔细检查过，我正在获取数据，如下所示：

{"d":"{\"total\":1,\"page\":0,\"records\":1,\"rows\":[{\"invPartLocId\":1053, \"inventoryMasterId\":5,\"location\":null,\"itemType\":\"S\",\"currentQanity\":1,\"adjustedQauntity\":0,\"newLocationQty\": 0,\"部门代码\":\"1401\"}]}"}

任何帮助将不胜感激。

    function locationGrid() {
        $('#invLocAdjustGrid').jqgrid({
            height: 290,
            loadui: "block",
            datatype: function (rdata) { getLocationData(rdata); },
            colNames: ['invPartID', 'locationPartID', 'Loctaion', 'Type', 'Current QTY', 'Adjusted QTY', 'New Location QTY', 'Dept. Code'],
            colModel: [
                    { name: 'invPartLocId', width: 2, sortable: false, editable: false, hidden: true },
                    { name: 'inventoryMasterId', width: 2, sortable: false, editable: false, hidden: true },
                    { name: 'location', width: 250, editable: false, sortable: false },
                    { name: 'itemType', width: 120, editable: false, sortable: false, align: 'center' },
                    { name: 'currentQanity', width: 50, editable: false, sortable: false },
                    { name: 'adjustedQauntity', width: 50, editable: false, sortable: false },
                    { name: 'newLocationQty ', width: 50, editable: false, sortable: false },
                    { name: 'deptCode', width: 50, editable: false, sortable: false }
                ],
           pager: jQuery('#rptCodesPager'),
            viewrecords: true,
            width: 890,
            gridComplete: function () {
                $('#load_invLocAdjustGrid').hide();
                $(this).prop('p').loadui = 'enable';
                $('#lui_invLocAdjustGrid').hide();

            },
            afterInsertRow: function (rowid, aData) {

            },
            ondblClickRow: function (rowid) {
                var myID = $('#invLocAdjustGrid').getCell(rowid, 'invPartLocId');
                Ldclicked(myID);
            }
        });
    }
    function getLocationData(rdata) {
        var theID = tempID;
        tempID = "";
        var myDTO = { 'id': theID };
        var toPass = JSON.stringify(myDTO);
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: "INV_Inventory_Adjustment.aspx/getInventoryLocationById",
            data: toPass,
            success: function (data, textStatus) {
                if (textStatus == "success")
                    ReceivedLocationData(JSON.parse(getMain(data)).rows);
            },
            error: function (data, textStatus) { alert('An error has occured retrieving data!'); }
        });
    }
    function ReceivedLocationData(data) {
        var thegrid = $('#invLocAdjustGrid');
        var isGood = data.length;
        for (var i = 0; i < isGood; i++) {
                thegrid.addRowData(i + 1, data[i]);


            }
    }

Answer 1

抱歉，您的代码有问题。此外，我建议您重写整个代码，并尝试解释原因。

第一个重要错误是您在locationGrid 中使用了$('#invLocAdjustGrid').jqgrid({...}); 而不是$('#invLocAdjustGrid').jqGrid({...});。 JavaScript 区分大小写，因此使用jqGrid 而不是jqgrid 非常重要。

存在下一个问题，因为您使用了一些变量和函数 tempID、Ldclicked 和 getMain，这些变量和函数未在发布的代码中定义。

在进行最小的更改后，the demo 工作正常。我只注释了“POST”以使用 HTTP GET，因为我直接从文件中获取 JSON，并且在婚礼服务器上没有活动组件。

您清楚的另一个问题是您的服务器代码将结果序列化两次。通常由于 ASMX WebMethods 的错误使用而出现问题。应该不手动将对象转换为 JSON。而不是只需要返回对象本身。由于这个问题，JSON 的 d 属性不是对象本身，而是一个应该再解析一次的字符串：

{
    "d": "{\"total\":1,\"page\":0,\"records\":1,\"rows\":[{\"invPartLocId\":1053,\"inventoryMasterId\":5,\"location\":null,\"itemType\":\"S\",\"currentQanity\":1,\"adjustedQauntity\":0,\"newLocationQty\":0,\"deptCode\":\"1401 \"}]}"
}

jqGrid 无需使用datatype作为函数也可以读取这种格式错误的数据。此外，您应该始终使用gridview: true，并且永远不要使用afterInsertRow，并且几乎永远不要使用addRowData。修改后的代码大概如下：

var tempID = "abc";
$('#invLocAdjustGrid').jqGrid({
    url: "INV_Inventory_Adjustment.aspx/getInventoryLocationById",
    mtype: "POST",
    datatype: "json",
    postData: {
        id: function () { return tempID; } // ??? I don't know which data should be send
    },
    ajaxGridOptions: { contentType: "application/json" },
    serializeRowData: function (data) {
        return JSON.stringify(data);
    },
    beforeProcessing: function (data) {
        $.extend (true, data, $.parseJSON(data.d));
    },
    jsonReader: {repeatitems: false},
    loadonce: true,
    colNames: ['invPartID', 'locationPartID', 'Loctaion', 'Type', 'Current QTY', 'Adjusted QTY', 'New Location QTY', 'Dept. Code'],
    colModel: [
        { name: 'invPartLocId', width: 2, key: true, hidden: true },
        { name: 'inventoryMasterId', width: 2, hidden: true },
        { name: 'location', width: 250 },
        { name: 'itemType', width: 120, align: 'center' },
        { name: 'currentQanity' },
        { name: 'adjustedQauntity' },
        { name: 'newLocationQty ' },
        { name: 'deptCode' }
    ],
    cmTemplate: {sortable: false, width: 50},
    pager: '#rptCodesPager',
    viewrecords: true,
    gridview: true,
    loadui: "block",
    height: 290,
    width: 890,
    ondblClickRow: function (rowid) {
        //Ldclicked(rowid);
    }
});

The next demo 证明代码有效。我在演示中包含了选项loadonce: true，这对您也有帮助。