jquery jqGrid onSelectRow jqGrid不是函数错误

zbdgwd5y  于 2023-11-17  发布在  jQuery
关注(0)|答案(2)|浏览(173)

我试图从jqGrid中获取选定行,但它在SelectedRow事件上失败。Grid本身加载数据没有任何问题。仅在选定行事件上出错。我在这里缺少什么。下面是我的JavaScript代码。
错误是“Uncaught TypeError:jQuery(...).jqGrid is not a function”

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" rel="stylesheet"/>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" integrity="sha512-xAIWSSbGucVRdutqUD0VLDowcMF/K8W87EbIoa9YUYB4bTyt/zeykyuu9Sjp0TPVdgrgGgBVCBowKv46wY5gDQ==" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>

<script type="text/javascript">

    

    var cellValue;
    var id;
    $("#Demogrid").jqGrid
        ({
            url: "/Job/GetProcess",
            datatype: 'json',
            mtype: 'Get',
            
            //table header name
            colNames: ['ProcessId', 'ProcessTypeName', 'ProcessStatus',
                'ProcessStartTime', 'ProcessEndTime', 'Elapsed'],
            //colModel takes the data from controller and binds to grid
            colModel: [
                { name: "ProcessId" },
                { name: "ProcessTypeName" },
                { name: "ProcessStatus" },
                { name: "ProcessStartTime" },
                { name: "ProcessEndTime" },
                { name: "Elapsed" }
            ],
            height: '100%',
            rowNum: 10,
            loadonce: true,
            pager: jQuery('#pager'),
            rowList: [10, 20, 30, 40],
            caption: 'Process Grid',
            emptyrecords: 'No records',
            footerrow: true,
            iconSet: "fontAwesome",
            userDataOnFooter: true, // use the userData parameter of the JSON response to display data on footer
            jsonReader:
            {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                Id: "0"
            },
            onSelectRow: function (id) {
                debugger;
                var rowData = jQuery(this).jqGrid('viewGridRow', id);
                cellValue = rowData['ProcessId'];
            },
            autowidth: true,
        });

</script>

字符串
下面是错误的屏幕截图。

0mkxixxg

0mkxixxg1#

我有你的代码,它是我的工作正常。唯一的例外是,你需要使用文档准备功能或设置像这样的身体脚本

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Gurrido  Issues</title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" rel="stylesheet"/>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" integrity="sha512-xAIWSSbGucVRdutqUD0VLDowcMF/K8W87EbIoa9YUYB4bTyt/zeykyuu9Sjp0TPVdgrgGgBVCBowKv46wY5gDQ==" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>

</head>
<body>
<table id ="Demogrid"></table>
<div id="pager"></div>
<script type="text/javascript">
    var cellValue;
    var id;
    $("#Demogrid").jqGrid
...
     });

</script>

</body>
</html>

字符串

z5btuh9x

z5btuh9x2#

尝试以这种方式选择网格:

$("#Demogrid").jqGrid('viewGridRow', id);

字符串

相关问题