javascript - 未捕获的 TypeError : $(. ..).jqGrid 不是 subGridRowExpanded 上的函数

Question

我正在尝试将数据加载到 jqGrid 子网格(subgrid as grid)并在这一行出现上述错误:

$("#" + subgrid_table_id).jqGrid

请帮忙 - 谢谢。

我的 JS 代码:

<link rel="stylesheet" href="~/Styles/ui.jqgrid-bootstrap.css" />
<link rel="stylesheet" href="~/Styles/ui.jqgrid-bootstrap-ui.css" />

<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/JqGrid/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/JqGrid/jquery.jqGrid.js"></script>
<script src="~/Scripts/JqGrid/grid.jqueryui.js"></script>
<script src="~/Scripts/JqGrid/grid.subgrid.js"></script>
<script src="~/Scripts/JqGrid/jqModal.js"></script>
<script src="~/Scripts/JqGrid/i18n/grid.locale-he.js"></script>

<div id="jqGrid">
    <table id="grid" style="float:right; width:100%"></table>
    <div id="pager" style="float:right;"></div>   
</div>
<script type="text/javascript">

    var gridDataUrl = 'GetAllPurchasesJson';
    var lastSel;

    $("#grid").jqGrid({
        url: gridDataUrl,
        datatype: "json",
        mtype: 'POST',
        jsonReader: {
            root: 'gridModel',
            repeatitems: true,
            subgrid: {root:'rows', repeatitems: true, cell:"cell" } 
        }
    ,

     colNames: ['Id','סטטוס','סה"כ כולל מע"מ','מע"מ','סה"כ ללא מע"מ','תאריך אספקה','תאריך הזמנה','ספק','מספר הזמנה'],
     colModel: [

                  { name: 'Id', index: 'Id', width: 50, align: 'right', hidden: true },
                   {
                       name: 'Status',
                       index: 'סטטוס',
                       width: 100,
                       align: 'right',
                       editable: true,

                   },
                  {
                      name: 'Total',
                      index: 'סה"כ כולל מע"מ',
                      width: 100,
                      align: 'right',


                  },
                        { name: 'Vat', index: 'מע"מ', width: 100, align: 'right' },
                  { name: 'TotalNoVat', index: 'סה"כ ללא מע"מ', width: 100, align: 'right' },
                  { name: 'ArrivedDate', index: 'תאריך אספקה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
                  { name: 'OrderDate', index: 'תאריך הזמנה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
                  { name: 'Supplier', index: 'ספק', width: 100, align: 'right' },
                  { name: 'OrderNumber', index: 'מספר הזמנה', width: 100, align: 'right' }




     ],
    cmTemplate: { editable: false },
     rowNum: 20,
     rowList: [10, 20, 30],
     height: 'auto',
     width: '800',
     pager: jQuery('#pager'),
     sortname: 'Name',
     viewrecords: true,
     sortorder: "desc",
     regional: 'he',
     editurl: '@Url.Action("SaveOrUpdateProduct", "Inventory")',
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id) {
            // we pass two parameters
            // subgrid_id is a id of the div tag created within a table
            // the row_id is the id of the row
            // If we want to pass additional parameters to the url we can use
            // the method getRowData(row_id) - which returns associative array in type name-value
            // here we can easy construct the following
            var subgrid_table_id;
            subgrid_table_id = subgrid_id+"_t";
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
            $("#" + subgrid_table_id).jqGrid({
                url:"GetPurchaseDetailes/"+row_id,
                datatype: "json",
                colNames: ['Id','Status','ActualTotal','ActualVat','ActualPaid'],
                colModel: [
                  {name:"Id",index:"Id",width:80,key:true},
                  {name:"Status",index:"Status",width:130},
                  {name:"ActualTotal",index:"ActualTotal",width:80,align:"right"},
                  {name:"ActualVat",index:"ActualVat",width:80,align:"right"},           
                  {name:"ActualPaid",index:"ActualPaid",width:100,align:"right",sortable:false}
                ],
                height: '100%',
                rowNum:20,
                sortname: 'Id',
                sortorder: "asc"
            });
        }          });

Answer 1

这对我来说看起来像一个 jQuery 冲突:https://api.jquery.com/jquery.noconflict/

尝试将 jQuery 包装在匿名函数中，如下所示:

(function($) {
    // jQuery code
})(jQuery);

您页面上的 jQuery 将如下所示:

<script type="text/javascript">
  (function($) {
    var gridDataUrl = 'GetAllPurchasesJson';
    var lastSel;

    $("#grid").jqGrid({
        url: gridDataUrl,
        datatype: "json",
        mtype: 'POST',
        jsonReader: {
            root: 'gridModel',
            repeatitems: true,
            subgrid: {root:'rows', repeatitems: true, cell:"cell" } 
        }
    ,

     colNames: ['Id','סטטוס','סה"כ כולל מע"מ','מע"מ','סה"כ ללא מע"מ','תאריך אספקה','תאריך הזמנה','ספק','מספר הזמנה'],
     colModel: [

                  { name: 'Id', index: 'Id', width: 50, align: 'right', hidden: true },
                   {
                       name: 'Status',
                       index: 'סטטוס',
                       width: 100,
                       align: 'right',
                       editable: true,

                   },
                  {
                      name: 'Total',
                      index: 'סה"כ כולל מע"מ',
                      width: 100,
                      align: 'right',


                  },
                        { name: 'Vat', index: 'מע"מ', width: 100, align: 'right' },
                  { name: 'TotalNoVat', index: 'סה"כ ללא מע"מ', width: 100, align: 'right' },
                  { name: 'ArrivedDate', index: 'תאריך אספקה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
                  { name: 'OrderDate', index: 'תאריך הזמנה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
                  { name: 'Supplier', index: 'ספק', width: 100, align: 'right' },
                  { name: 'OrderNumber', index: 'מספר הזמנה', width: 100, align: 'right' }




     ],
    cmTemplate: { editable: false },
     rowNum: 20,
     rowList: [10, 20, 30],
     height: 'auto',
     width: '800',
     pager: jQuery('#pager'),
     sortname: 'Name',
     viewrecords: true,
     sortorder: "desc",
     regional: 'he',
     editurl: '@Url.Action("SaveOrUpdateProduct", "Inventory")',
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id) {
            // we pass two parameters
            // subgrid_id is a id of the div tag created within a table
            // the row_id is the id of the row
            // If we want to pass additional parameters to the url we can use
            // the method getRowData(row_id) - which returns associative array in type name-value
            // here we can easy construct the following
            var subgrid_table_id;
            subgrid_table_id = subgrid_id+"_t";
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
            $("#" + subgrid_table_id).jqGrid({
                url:"GetPurchaseDetailes/"+row_id,
                datatype: "json",
                colNames: ['Id','Status','ActualTotal','ActualVat','ActualPaid'],
                colModel: [
                  {name:"Id",index:"Id",width:80,key:true},
                  {name:"Status",index:"Status",width:130},
                  {name:"ActualTotal",index:"ActualTotal",width:80,align:"right"},
                  {name:"ActualVat",index:"ActualVat",width:80,align:"right"},           
                  {name:"ActualPaid",index:"ActualPaid",width:100,align:"right",sortable:false}
                ],
                height: '100%',
                rowNum:20,
                sortname: 'Id',
                sortorder: "asc"
            });
        }          
    });
  })(jQuery);
</script>