Question

我正在尝试在java脚本的全局变量中获取网格的值。使用paramQuery的变量名称 datagrid 。现在这是功能。我从网站上获取了模板

var $grid;
var datagrid;
$(function () {
    var dateEditor = function (ui) {
        var $cell = ui.$cell,
            rowData = ui.rowData,
            dataIndx = ui.dataIndx,
            cls = ui.cls,
            dc = $.trim(rowData[dataIndx]);
        $cell.css('padding', '0');

        var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-date-editor' />")
            .appendTo($cell)
            .val(dc).datepicker({
                changeMonth: true,
                changeYear: true,
                onClose: function () {
                    $inp.focus();
                }
            });
    }

    var obj = {
        hwrap: false,
        resizable: true,
        rowBorders: false,
        virtualX: true,
        numberCell: { show: true },
        trackModel: { on: true }, //to turn on the track changes.            
        toolbar: {
            items: [
                {
                    type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener:
                    {
                        "click": function (evt, ui) {
                            //append empty row at the end.                            
                            var rowData = { TransactionAmount: 0}; //empty row
                            var rowIndx = $grid.pqGrid("addRow", { rowData: rowData });
                            $grid.pqGrid("goToPage", { rowIndx: rowIndx });
                            $grid.pqGrid("setSelection", null);
                            $grid.pqGrid("setSelection", { rowIndx: rowIndx, dataIndx: 'TransactionAmount' });
                            $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
                        }
                    }
                },
                { type: 'separator' },
                {
                    type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener:
                    {
                        "click": function (evt, ui) {
                            $grid.pqGrid("history", { method: 'undo' });
                        }
                    },
                    options: { disabled: true }
                },
                {
                    type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener:
                    {
                        "click": function (evt, ui) {
                            $grid.pqGrid("history", { method: 'redo' });
                        }
                    },
                    options: { disabled: true }
                },
                {
                    type: "<span class='saving'>Saving...</span>"
                }
            ]
        },
        scrollModel: {
            autoFit: true
        },
        historyModel: {
            checkEditableAdd: true
        },
        editModel: {
            //allowInvalid: true,
            saveKey: $.ui.keyCode.ENTER,
            uponSave: 'next'
        },
        editor: {
            select: true
        },
        title: "<b>Auto save</b>",
        change: function (evt, ui) {
            //debugger;
            if (ui.source == 'commit' || ui.source == 'rollback') {
                return;
            }
            console.log(ui);
            var $grid = $(this),
                grid = $grid.pqGrid('getInstance').grid;
            var rowList = ui.rowList,
                addList = [],
                recIndx = grid.option('dataModel').recIndx,
                deleteList = [],
                updateList = [];

            for (var i = 0; i < rowList.length; i++) {
                var obj = rowList[i],
                    rowIndx = obj.rowIndx,
                    newRow = obj.newRow,
                    type = obj.type,
                    rowData = obj.rowData;
                if (type == 'add') {
                    var valid = grid.isValid({ rowData: newRow, allowInvalid: true }).valid;
                    if (valid) {
                        addList.push(newRow);
                    }
                }
                else if (type == 'update') {
                    var valid = grid.isValid({ rowData: rowData, allowInvalid: true }).valid;
                    if (valid) {
                        if (rowData[recIndx] == null) {
                            addList.push(rowData);
                        }
                        //else if (grid.isDirty({rowData: rowData})) {
                        else {
                            updateList.push(rowData);
                        }
                    }
                }
                else if (type == 'delete') {
                    if (rowData[recIndx] != null) {
                        deleteList.push(rowData);
                    }
                }
            }
            if (addList.length || updateList.length || deleteList.length) {
                $.ajax({
                    url: '/pro/products/batch',
                    data: {
                        list: JSON.stringify({
                            updateList: updateList,
                            addList: addList,
                            deleteList: deleteList
                        })
                    },
                    dataType: "json",
                    type: "POST",
                    async: true,
                    beforeSend: function (jqXHR, settings) {
                        $(".saving", $grid).show();
                    },
                    success: function (changes) {
                        //commit the changes.                
                        grid.commit({ type: 'add', rows: changes.addList });
                        grid.commit({ type: 'update', rows: changes.updateList });
                        grid.commit({ type: 'delete', rows: changes.deleteList });
                    },
                    complete: function () {
                        $(".saving", $grid).hide();
                    }
                });
            }
        },
        history: function (evt, ui) {
            var $grid = $(this);
            if (ui.canUndo != null) {
                $("button.changes", $grid).button("option", { disabled: !ui.canUndo });
            }
            if (ui.canRedo != null) {
                $("button:contains('Redo')", $grid).button("option", "disabled", !ui.canRedo);
            }
            $("button:contains('Undo')", $grid).button("option", { label: 'Undo (' + ui.num_undo + ')' });
            $("button:contains('Redo')", $grid).button("option", { label: 'Redo (' + ui.num_redo + ')' });
        },
        colModel: [
            {
                title: "Cash Flow Type", dataIndx: "CashFlowType", width: 110,
                editor: {
                    type: 'select',
                    options: ['SUSP- TRANSACTION', 'NONE SELECTED']

                }
            },
            {
                title: "Transaction Type", dataIndx: "TransactionTypeCode", width: 110,
                editor: {
                    type: 'select',
                    options: ['RECEIPT', 'PAYMENT', 'NONE SELECTED']

                }
            },
            {
                title: "Transaction Amount", dataIndx: "TransactionAmount", dataType: "float", width: 100, align: "right",
                editModel: { keyUpDown: true },
                render: function (ui) {
                    return "$" + parseFloat(ui.cellData).toFixed(2);
                }
            },
            {
                title: "Transaction Value Date", width: "150", dataIndx: "TransactionValuedate",
                editor: {
                    type: dateEditor
                }

            },
            {
                title: "Transaction Date", width: "150", dataIndx: "TransactionDate",
                editor: {
                    type: dateEditor
                }
            },
            { title: "Customer Reference Number", width: 100, dataIndx: "CustomerReferenceNumber", editable: true },
            { title: "Bank Reference Number", width: 100, dataIndx: "BankReferenceNumber", editable: true },
            { title: "Transaction Description", width: 100, dataIndx: "TransactionDescription", editable: true }

        ],
        pageModel: { type: "local", rPP: 20 },
        dataModel: {
            dataType: "JSON",
            location: "remote",
            recIndx: "ProductID",
            url: "/pro/products/get", //for ASP.NET
            //url: "/pro/products.php", //for PHP
            getData: function (response) {
                return { data: response.data };
            }
        },
        load: function (evt, ui) {
            var grid = $(this).pqGrid('getInstance').grid,
                data = grid.option('dataModel').data;
            $(this).pqTooltip();
            var ret = grid.isValid({ data: data, allowInvalid: false });
        },
        refresh: function () {
            $("#grid_editing").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors' } })
                .unbind("click")
                .bind("click", function (evt) {
                    var $tr = $(this).closest("tr");
                    var rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
                    $grid.pqGrid("deleteRow", { rowIndx: rowIndx });
                });
        }
    };
    $grid = $("#grid_editing").pqGrid(obj);
    datagrid = $grid.pqGrid("option", "dataModel.data");

});

现在，当我尝试使用datagrid时，它是未定义的

console.log（datagrid）;

但是...如果我转到浏览器控制台。我确实拥有您在所附图片上看到的信息

有什么想法吗？

ParamQuery保存到变量

0 个答案: