jqGrid onSelectRow jqGrid 不是函数错误

Question

我试图从 jqGrid 获取选定的行，但 onSelectedRow 事件失败。网格本身加载数据没有任何问题。仅在选定的行事件上出错。我在这里缺少什么。下面是我的 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>

下面还有错误的屏幕截图。

Answer 1

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

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