Question

真的不确定发生了什么。当它自己加载时 - 加载精细，快速且完全没有错误。从其他页面调用时 - 失败并显示错误“元素不是表格”

<table id="Products"><tr><td></td></tr></table>
<table id="Products_pager"></table>
<script>
$(document).ready(function () {


    var editOptions = {
            keys: true,
            aftersavefunc: function() {
                var $self = $(this);
                setTimeout(function () {
                    $self.trigger("reloadGrid", [{current: true}]);
                }, 50);
            },
            url: "xtras/Products.php"
        },
        gridIdSelector = "#Products",
        pagerIdSelector = "#Products_pager",
        $grid = $(gridIdSelector);

    $.extend($.jgrid.search, {
        sopt: ["eq", "ne", "cn", "bw", "bn", "ge", "le", "lt", "gt"],
        multipleSearch: true
    });

    var last_selected_row;

    $grid.jqGrid({
        url:'xtras/Products.php',
        editurl:'xtras/Products.php',
        datatype: "json",
        mtype:'GET',
        colModel:[

            .............

        ],
        height: "100%",
        minWidth: 900,
        rowNum:15,
        rowList:[10,15,20,30,50,100,150,200],
        viewrecords: true,
        sortname:"ID",
        sortorder: "desc",
        pager: pagerIdSelector,
        caption:"Products",
        afterSubmit: function () {
            $("#Products").jqGrid('editRow',row_id, true, null, 
                        function(){ $("#Products").trigger("reloadGrid", [{current: true}]); }, 
                        'xtras/Products.php', 
                        null,{},
                        {},{}
                    );
        },
        ajaxGridOptions: {cache: false},

        loadError: function (jqXHR, textStatus, errorThrown) {
            alert('HTTP status code: ' + jqXHR.status + '\n' +
                  'textStatus: ' + textStatus + '\n' +
                  'errorThrown: ' + errorThrown);
            alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
        },

        loadComplete: function(data) {
        },

        ondblClickRow: function (rowid) {
            var $self = $(this),
                savedRows = $self.jqGrid("getGridParam", "savedRow");

            if (savedRows.length > 0 && savedRows[0].id !== rowid) {
                // cancel editing of another row is editing
                // don't cancel on double click on the current editing
                $self.jqGrid("restoreRow", savedRows[0].id);
            }
            if (savedRows.length === 0) {
                $self.jqGrid("editRow", rowid, editOptions);
            }
        }
    }).jqGrid("navGrid", pagerIdSelector, {add: false, edit: false, refreshstate: "current"})
        .jqGrid("inlineNav", pagerIdSelector, { editParams: editOptions, addParams: {addRowParams: editOptions}})
        .jqGrid("navButtonAdd", pagerIdSelector, {
            caption: "",
            title: "Copy selected row",
            id: $grid[0].id + "_ilcopy", 
            buttonicon: "ui-icon-copy",
            onClickButton: function () {
                var $self = $(this), p = $self.jqGrid("getGridParam"), rowData,
                    srcrowid = p.selrow, savedRows = p.savedRow;

                if (srcrowid !== null) {
                    if (savedRows.length > 0) {
                        // cancel editing
                        $self.jqGrid("restoreRow", savedRows[0].id);
                    }
                    rowData = $self.jqGrid("getRowData", srcrowid);
                    rowData.ID = "";
                    rowData.Catalogue = "";
                    rowData.UPCEAN = "";
                    rowData.copyID = srcrowid;
                    $self.jqGrid("addRow", {
                        initdata: rowData,
                        addRowParams: editOptions 
                    });
                } else {
                    alert("Please select a row to copy");
                    return false;
                }
            }
        });

    // Enable/disable buttons on start/end of editing
    $grid.bind("jqGridInlineEditRow jqGridInlineAfterSaveRow jqGridInlineAfterRestoreRow", function () {
        var $self = $(this),
            savedRows = $self.jqGrid("getGridParam", "savedRow");
        if (savedRows.length > 0) {
            // some row is editing now
            $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").removeClass("ui-state-disabled");
            $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").addClass("ui-state-disabled");
        } else {
            // No row is editing now
            $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").addClass("ui-state-disabled");
            $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").removeClass("ui-state-disabled");
        }
    });
});
</script>

任何建议赞赏

Answer 1

解决。该问题是由其加载的页面上具有相同ID的另一个元素引起的。

Answer 2

尝试用现代方法重写它，如下所示：

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<script type="text/javascript"> 
    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url:'xtras/Products.php', 
            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 }
            ],
            viewrecords: true,
            width: 780,
            height: 250,
            rowNum: 20,
            pager: "#jqGridPager"
        });
    });

从其他页面加载时，jqGrid元素不是表格

2 个答案: