jqgrid guriddo - 无法读取未定义的属性“styleUI”答案

【问题标题】：jqgrid guriddo - Cannot read property 'styleUI' of undefinedjqgrid guriddo - 无法读取未定义的属性“styleUI”
【发布时间】：2017-09-08 12:17:39
【问题描述】：

我将 styleUI 设置为默认的 jQueryUI。一切正常，无需在导航器中执行任何操作。当我尝试时：

$('#grid').navGrid(
      '#pager',
      { edit: true} ,
      {
         editCaption: "The Edit Dialog",
         errorTextFormat: function (data) {
            return 'Error: ' + data.responseText
         }
      }
   );

Javascript 因错误而崩溃：

无法读取未定义的属性“styleUI”。

我该如何解决这个问题？

我有最新版本，包括 ui.jqgrid.css 和 jquery.jqGrid.js。我做错了，但我不知道是什么

更新

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="path_to_ui_css_file/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="base.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="path_to_ui_css_file/ui.jqgrid.css" />
</head>
    <body>
        <div class="wrapper">

           <button id="export">EXPORT</button> 
           <table id="grid"></table>
           <div id="pager"></div>
        <div> 

    <script src="jquery.js" type="text/javascript">
    <script src="jquery-ui.js" type="text/javascript">
    <script src="path_to_js_files/grid.locale-en.js" type="text/javascript"></script>
    <script src="path_to_js_files/jquery.jqGrid.js" type="text/javascript"></script>

     <script type="text/javascript">

           $(function() {
              $( document ).ready(function() {

                 $options = [       //OPTIONS WITHOUT COLMODEL
                                 'mtype' => 'GET',
                                 'url' => '...'
                                 'datatype' => 'json',
                                 'height'=> null,
                                 'width'=> null,
                                 'shrinkToFit' => false,
                                 'gridview'=> true,
                                 'sortable' => true,
                                 'autoencode' => true,
                                 'rowNum'=> -1,
                                 'pager' => '#pager',
                                 'viewrecords' => true,
                                 'rowList' => [10, 50, 100, -1],
                     ];
                 $('#grid').jqGrid(options); 

                 $("#button").on("click", function(){

                    $('#grid').jqGrid('exportToCsv'); //WORK CORRECT
                 });

                 $('#grid').navGrid(   //DOESNT WORK
                   '#pager',
                   { edit: true} ,
                   {
                       editCaption: "The Edit Dialog",
                       errorTextFormat: function (data) {
                           return 'Error: ' + data.responseText
                   }
                 }
               );
              });
           });
        </script>
</body>
</html>

我正在尝试@license Guriddo jqGrid JS - v5.2.1 - 2017-05-01

jQuery 是较旧的 jQuery v1.8.2

【问题讨论】：

“将 styleUI 设置为默认 jQueryUI”是什么意思？
仅在 jqgrid 选项 'StyleUI' 中设置为 'jQueryUI'。我目前的选择是：{“mtype”：“GET”，“datatype”：“json”，“pager”：“pager”，“url”：“url”，“colModel”：[{“name”：“id ", "autoResizing": { "minColWidth": 310 }, "formatter": "integer" } ] }
我认为jqGrid 正在搜索#grid，如果您添加更多代码会很好
你确定你加载了 Guriddo jqGrid 吗？我看到你在 colMode 中有选项 autoRewsizing，这在 Guriddo jqGrid 中不可用，但可能在其他分支中。您能否发布完整的代码，包括页面中的所有内容 - 我的意思是加载了哪些库，什么 css 以及您的代码在 html 页面中的位置。
您的代码中有很多语法错误。我建议您使用一些专业的编辑器来修复它们。第一个是<div class="wrapper"> 没有正确关闭。其次，您没有正确关闭脚本标签等。请尝试以纯 html 文件执行此处发布的代码，您将看到结果，因为您似乎使用的是 PHP。当我修复语法错误时，您的代码可以正常运行

标签： jquery jquery-ui jqgrid

【解决方案1】：

我找到了解决方案，这是我的错误。我在元素中初始化 jqgrid 之前调用了 navGrid。我简单地将代码从 beforeInit 函数交换到 afterInit 并且一切正常。

【讨论】：

【解决方案2】：

当我遇到这个错误时，我正在处理一个子网格。为了解决这个问题，我使用链式定义了寻呼机函数，如下所示：

jQuery("#list").jqGrid({
    colModel: [
        { name: 'Name', width: 200, editable: true },
   //...

}).jqGrid('navGrid','#pager', { edit: true, add: true, del: false},

【讨论】：