Question

我在调用JavaScript部分中定义的函数时遇到了问题。

此版本在我的控制台中生成错误：

ReferenceError: manualSaveChanges is not defined

http://jsfiddle.net/msobczak/oa8rc27n/50/

我尝试在类中调用所有函数的命名空间，但现在控制台报告了这个错误：

ReferenceError: GridFunctions is not defined

http://jsfiddle.net/msobczak/oa8rc27n/53/

我试过onLoad，没有头部包裹，身体没有包裹。错误仍然存在。

修改

我尝试上班的代码不是一个简单的例子＆＃34;。我＆＃39;已经尝试更改代码包装，并在中定义函数另一堂课。这些解决方案都不适合我。

最终，我想要显示我的jquery网格，并且还可以访问我在JavaScript部分中定义的函数。我该如何解决这个问题？

好的，如果我因为我没有包含这两个示例的所有代码而被投票，那么这是第一个例子：

var mainGrid = {
    "total": 1,
        "page": 1,
        "pageSize": 20,
        "records": 1,
        "rows": [{
        "siteId": 11748974,
            "siteName": "Frederik Meijer Gardens",
            "siteAddress": "1000 E Beltline Ave NE",
            "siteCitySt": "Grand Rapids, MI",
            "siteZip": "49525-5804",
            "productCd": "INS_SHARED",
            "productName": "Insert - Shared Mail",
            "finishedSize": "NSW Half Sheet",
            "estimatedPieceWeight": null,
            "vdpTypeCode": null,
            "taHouseholds": 291333,
            "taDistribution": 241745,
            "distribution": 241745,
            "avgCpm": 33.7,
            "investment": 8146.81,
            "coverage": 82.98
    }]
};

var subGrid = {
    "total": 1,
        "page": 1,
        "pageSize": 20,
        "records": 2,
        "rows": [{
        "mediaPlanId": "5152",
            "mbuHdrId": 5481267,
            "mbuDtlId": 18085594,
            "commonMbuId": 122113,
            "ggId": 3569183,
            "fkGeoProfileId": 15032667,
            "fkSite": 11748974,
            "productCd": "INS_SHARED",
            "productName": "Insert - Shared Mail",
            "geocode": "49505F1",
            "cityName": "GRAND RAPIDS, MI",
            "households": 2361,
            "taHouseholds": 2361,
            "distribution": 2354,
            "cpm": 33.7,
            "investment": 79.3298,
            "taCoverage": 0,
            "isSelected": false
    }, {
        "mediaPlanId": "5152",
            "mbuHdrId": 5481266,
            "mbuDtlId": 18085593,
            "commonMbuId": 122093,
            "ggId": 3569184,
            "fkGeoProfileId": 15032666,
            "fkSite": 11748974,
            "productCd": "INS_SHARED",
            "productName": "Insert - Shared Mail",
            "geocode": "49505D1",
            "cityName": "GRAND RAPIDS, MI",
            "households": 4557,
            "taHouseholds": 4557,
            "distribution": 4537,
            "cpm": 33.7,
            "investment": 152.8969,
            "taCoverage": 99.56111476848804037744129910028527540048,
            "isSelected": true
    }]
};


var savedRows = [];

function updateRows(id, checkedValue) {
    var found = false;

    /*
        Check the array for the presence of the row.
        If it is found, add the saved value.
    */
    for (var index = 0; index < savedRows.length; index++) {
        if (savedRows[index].id == id) {
            savedRows[index].savedIsSelected = checkedValue;

            if (checkedValue == '1') savedRows[index].value = true;
            else savedRows[index].value = false;

            found = true;
        }
    }

    /*
        If row not found, it must be new.
    */
    if (!found) {
        var i = savedRows.length;
        savedRows[i] = {};
        savedRows[i].id = id;
        savedRows[i].origIsSelected = checkedValue === '1' ? '0' : '1';
        savedRows[i].savedIsSelected = checkedValue;

        if (checkedValue == '1') savedRows[i].value = true;
        else savedRows[i].value = false;

    }
}

function updateGridRow (gid, rowId, checkboxnameid) {
    var checkedValue = $('#' + checkboxnameid).is(':checked') ? '1' : '0';

    var grid = $('#' + gid);

    var rowids = grid.getDataIDs();

    //Loop through rows
    for (var i = 0; i < rowids.length; i++) {

        //Check the row Id's match
        if (rowId == rowids[i]) {
            var rowData = $('#' + gid).jqGrid('getRowData', rowId);

            $('#' + gid).jqGrid('setSelection', rowId);

            $('#' + gid).editRow(rowId);

            $('#' + gid).jqGrid('editCell', i + 1, true);
            $('#' + gid).jqGrid('setCell', i + 1, 'isSelected', checkedValue);
            $('#' + gid).jqGrid('saveCell', i + 1, true);

            $('#' + gid).saveRow(rowId);

            $('#' + gid).jqGrid("resetSelection");

            updateParentGridRow(checkedValue, gid, rowId, rowData.parentGridId, rowData.parentRowId);

        }
    }

    return true;
}

function updateParentGridRow (checkedValue, gid, rowid, parentGridId, parentRowId) {
    var grid = $("#" + gid);
    var $mainGrid = $("#" + parentGridId);

    // Total Distribution (showbn in grid as Distr Qty)
    var mainGridDist = parseFloat($mainGrid.jqGrid('getCell', parentRowId, 'distribution'));
    var subgridDist = parseFloat(grid.jqGrid('getCell', rowid, 'distribution'));
    mainGridDist += checkedValue === '1' ? subgridDist : -subgridDist;
    $mainGrid.jqGrid('setCell', parentRowId, 'distribution', mainGridDist);


    // Trade Area Distribution
    var mainGridTaDist = parseFloat($mainGrid.jqGrid('getCell', parentRowId, 'taDistribution'));
    var subgridTaDist = parseFloat(grid.jqGrid('getCell', rowid, 'taDistribution'));
    mainGridTaDist += checkedValue === '1' ? subgridTaDist : -subgridTaDist;
    $mainGrid.jqGrid('setCell', parentRowId, 'taDistribution', mainGridTaDist);

    // Investment
    var mainGridInv = parseFloat($mainGrid.jqGrid('getCell', parentRowId, 'investment'));
    var subgridInv = parseFloat(grid.jqGrid('getCell', rowid, 'investment'));
    mainGridInv += checkedValue === '1' ? subgridInv : -subgridInv;
    $mainGrid.jqGrid('setCell', parentRowId, 'investment', mainGridInv);

    // Coverage
    //var mainGridDist = parseFloat($mainGrid.jqGrid('getCell', parentRowId, 'distribution'));
    var mainGridHH = parseFloat($mainGrid.jqGrid("getCell", parentRowId, 'taHouseholds'));
    var coverage = (mainGridDist / mainGridHH) * 100;
    $mainGrid.jqGrid('setCell', parentRowId, 'coverage', coverage);

    // Save changes to local array
    var commonMbuId = grid.jqGrid('getCell', rowid, 'commonMbuId');
    updateRows(commonMbuId, checkedValue);
}

function manualSaveChanges() {
    saveChanges();
    alert('Your changes have been saved');
}

function saveChanges() {

    var changesToSend = [];

    if (savedRows.length > 0) {

        for (var i = 0; i < savedRows.length; i++) {

            if (savedRows[i].origIsSelected != savedRows[i].savedIsSelected) {
                var x = changesToSend.length;
                changesToSend[x] = {};
                changesToSend[x].id = Number(savedRows[i].id);
                changesToSend[x].value = savedRows[i].value;
            }

        }

    }

    if (changesToSend.length > 0) {
        var jsonPayload = JSON.stringify(changesToSend);

        $.ajax({
            async: false,
            url: "/echo/json/",
            type: 'POST',
            dataType: 'json',
            data: jsonPayload,
            contentType: 'application/json',
            error: function (jqXHR, textStatus, errorThrown) {
                var msg = 'textStatus = ' + textStatus +
                    'errorThrown = ' + errorThrown;
                alert(msg);
            },
            success: function (data, textStatus, jqXHR) {
                var msg = 'textStatus = ' + textStatus;
                alert(msg);

                savedRows = [];
            }
        });

    }
}

$(document).ready(function () {
$("#jqGrid").jqGrid({
   datatype: function(postdata) {

            $('#' + 'load_' + 'jqGrid').show();

            saveChanges();

                    var json = mainGrid;

                    for (var i = 0; i < json.rows.length; i++) {
                        json.rows[i].id = $.jgrid.randId();
                        json.rows[i].siteNameDisp = json.rows[i].siteName + ' - ' + 
                        json.rows[i].siteAddress + ', ' + 
                        json.rows[i].siteCitySt + ', ' + 
                        json.rows[i].siteZip;
                    }

                    var thegrid = $('#jqGrid')[0];
                    thegrid.addJSONData(json);

                    $('#' + 'load_' + 'jqGrid').hide();
                },
    page: 1,
    colModel: [
    {
        label: 'ID',
        name: 'id',
        width: 50,
        hidden: true,
        key: true,
        editable: true,
        sortable: false,
        editrules: {
            edithidden: true
        }
    },
    {
        label: 'Site Id',
        name: 'siteId',
        width: 100,
        sortable: false,
        editable: true,
        hidden: true,
        editrules: {
            edithidden: true
        }
    },
    {
        label: 'Site',
        name: 'siteNameDisp',
        width: 250,
        sortable: false
    },
    {
        label: 'Trade Area Households',
        name: 'taHouseholds',
        width: 100,
        sortable: false,
        formatter: 'number',
        formatoptions: {
            thousandsSeparator: ",",
            decimalPlaces: 0
        },
        align: 'right'
    },
    {
        label: 'Trade Area Distribution',
        name: 'taDistribution',
        width: 85,
        sortable: false,
        formatter: 'number',
        formatoptions: {
            thousandsSeparator: ",",
            decimalPlaces: 0
        },
        align: 'right'
    },
    {
        label: 'Total Distribution',
        name: 'distribution',
        width: 85,
        sortable: false,
        formatter: 'number',
        formatoptions: {
            thousandsSeparator: ",",
            decimalPlaces: 0
        },
        align: 'right'
    },
    {
        label: 'CPM',
        name: 'avgCpm',
        width: 50,
        sortable: false,
        formatter: 'currency',
        formatoptions: {
            decimalSeparator: ".",
            thousandsSeparator: ",",
            decimalPlaces: 2,
            prefix: "$ "
        },
        align: 'right'
    },
    {
        label: 'Investment',
        name: 'investment',
        width: 75,
        sortable: false,
        formatter: 'currency',
        formatoptions: {
            decimalSeparator: ".",
            thousandsSeparator: ",",
            decimalPlaces: 2,
            prefix: "$ "
        },
        align: 'right'
    },
    {
        label: 'Coverage %',
        name: 'coverage',
        width: 70,
        sortable: false,
        formatter: 'currency',
        formatoptions: {
            decimalSeparator: ".",
            thousandsSeparator: ",",
            decimalPlaces: 2,
            suffix: " %"
        },
        align: 'right'
    },
    {
        label: 'Product',
        name: 'productCd',
        width: 150,
        sortable: false,
        editable: true,
        hidden: true,
        editrules: {
            edithidden: true
        }
    }
    ],
    viewrecords: true,
    width: 800,
    shrinkToFit: false,
    height: '100%',
    rowNum: 20,
    pager: "#jqGridPager",
    subGrid: true,
    subGridRowExpanded: function (subgrid_id, parentRowId) {
        var grid = $("#jqGrid");
        var row = grid.getRowData(parentRowId);
        showDetail(subgrid_id, parentRowId);
    }
});
});

function showDetail(subgrid_id, parentRowId) {
    var lastSelection;

    var parentGridId = 'jqGrid';

    var grid = $('#' + parentGridId);
    var row = grid.getRowData(parentRowId);
    var siteId = row.siteId;
    var productCode = row.productCd;

    var subgrid_table_id = subgrid_id + "_table";
    var subgrid_pager_id = subgrid_id + "_pager";

    $("#" + subgrid_id).html("<table id=\'" + subgrid_table_id + "' class='scroll'></table>" +
        "<div id=\'" + subgrid_pager_id + "\'></div>");

    $("#" + subgrid_table_id).jqGrid({

        datatype: function(postdata) {
                    $('#' + 'load_' + subgrid_table_id).show();

                    saveChanges();

                    var json = subGrid;

                    for (var i = 0; i < json.rows.length; i++) {                                
                        json.rows[i].taDistribution = json.rows[i].distribution;
                        json.rows[i].parentGridId = parentGridId;
                        json.rows[i].parentRowId = parentRowId;
                    }

                    var thegrid = $("#" + subgrid_table_id)[0];
                    thegrid.addJSONData(json);
                    $('#' + 'load_' + subgrid_table_id).hide();                 
                },

        editurl: 'clientArray',
        page: 1,

        colModel: [{
            label: 'Site ID',
            name: 'siteId',
            width: 75,
            sortable: false,
            editable: true,
            hidden: true,
            editrules: {
                edithidden: true
            }
        },
        {
            label: 'Common MBU ID',
            name: 'commonMbuId',
            width: 75,
            sortable: false,
            editable: true,
            hidden: true,
            editrules: {
                edithidden: true
            }
        },
        {
            label: 'Include',
            name: 'isSelected',
            width: 60,
            sortable: false,
            editable: false,
            edittype: "checkbox",
            formatter: checkboxFormatter2,
            unformat: unformatCheckbox,
            //formatoptions : { disabled: false },
            editOptions: {
                value: "1:0"
            },
            align: 'center'
        },
        {
            label: 'Parent Grid ID',
            name: 'parentGridId',
            width: 75,
            hidden: true
        },
        {
            label: 'Parent Row ID',
            name: 'parentRowId',
            width: 75,
            hidden: true
        },
        {
            label: 'Geography',
            name: 'geocode',
            width: 70,
            sortable: false,
            key: true
        },
        {
            label: 'City, State',
            name: 'cityName',
            width: 100,
            sortable: false
        },
        {
            label: 'TA HHs',
            name: 'taHouseholds',
            width: 35,
            sortable: false,
            formatter: 'number',
            formatoptions: {
                thousandsSeparator: ",",
                decimalPlaces: 0
            },
            align: 'right'
        },
        {
            label: 'Distr Qty',
            name: 'distribution',
            width: 35,
            sortable: false,
            formatter: 'number',
            formatoptions: {
                thousandsSeparator: ",",
                decimalPlaces: 0
            },
            align: 'right'
        },
        {
            label: 'TA Distr',
            name: 'taDistribution',
            width: 35,
            sortable: false,
            hidden: true,
            formatter: 'number',
            formatoptions: {
                thousandsSeparator: ",",
                decimalPlaces: 0
            },
            align: 'right'
        },
        {
            label: 'CPM',
            name: 'cpm',
            width: 35,
            sortable: false,
            formatter: 'currency',
            formatoptions: {
                decimalSeparator: ".",
                thousandsSeparator: ",",
                decimalPlaces: 2,
                prefix: ""
            },
            align: 'right'
        },
        {
            label: 'Investment',
            name: 'investment',
            width: 75,
            sortable: false,
            formatter: 'currency',
            formatoptions: {
                decimalSeparator: ".",
                thousandsSeparator: ",",
                decimalPlaces: 2,
                prefix: "$ "
            },
            align: 'right'
        },
        {
            label: 'Coverage %',
            name: 'taCoverage',
            width: 70,
            sortable: false,
            formatter: 'currency',
            formatoptions: {
                decimalSeparator: ".",
                thousandsSeparator: ",",
                decimalPlaces: 2,
                suffix: " %"
            },
            align: 'right'
        }
        ],
        viewrecords: true,
        height: '100%',
        shrinkToFit: false,
        rowNum: 20,
        pager: "#" + subgrid_pager_id
    });

}

function checkboxFormatter2(cellvalue, options, rowObject) {
    var html = '';

    var checkboxnameid = options.colModel.name + options.rowId;

    var onclick = 'onclick="updateGridRow(\'' + options.gid + '\', \'' + options.rowId + '\', \'' + checkboxnameid + '\'' +
        ');" ';

    if (cellvalue || cellvalue == "1") {
        html = '<input type="checkbox" id="' + checkboxnameid + '"checked="checked" ' + onclick + ' />';
    } else {
        html = '<input type="checkbox" id="' + checkboxnameid + '" ' + onclick + ' />';
    }

    return html;
}

function unformatCheckbox(cellvalue, options) {
    if (cellvalue.indexOf('checked') > -1) return '1';
    else return '0';
}

我无法包含第二个示例，因为它会超过Stack Exchange机构限制30000.

Answer 1

我用jsFiddle样本解决的问题有两个方面：

1）更改了jsFiddle页面以使用 No Wrap - in body

2）将我的所有独立JavaScript函数更改为包含在名为GridFunctions的JavaScript类中，然后更改我调用这些方法的所有实例以使用以下约定：

GridFunctions.manualSaveChanges();

有几个实例，GridFunctions中的方法在GridFunctions中调用了其他方法。例如，manualSaveChanges()名为saveChanges()。要解决该问题，我需要将manualSaveChanges()中的代码更改为以下内容：

this.saveChanges();

这是一个有效的jsFiddle示例：

http://jsfiddle.net/msobczak/oa8rc27n/61/

我希望这可以帮助别人。

jsFiddle：函数未定义

1 个答案: