1

私はここで奇妙な問題に直面しています。

jqGridをjQueryタブ内に配置しました。以下はスナップショットです。

ここに画像の説明を入力してください ここに画像の説明を入力してください

jqgridにフィルターツールバーを実装しようとしています。しかし、フィルターツールバーの検索ボックスのいずれかに何かを入力すると、「読み込み中」ポップアップが表示されたままになり、何も起こりません。以下はスナップショットです。

ここに画像の説明を入力してください

IEでは、次のエラーが発生します。

jQuery.jgridがnullであるか、オブジェクトではありません

Chromeでは、エラーは次のようになります。

Uncaught TypeError：未定義のメソッド'getAccessor'を呼び出すことができません

タブを削除すると、filtertoolbar機能が正常に機能します。jqGridfiltertoolbarとjQueryタブの間に問題はありますか？

アップデート1

タブJSPコード：

<script>    
    $(function() {
        $( "#workQueuesTab" ).tabs();
    });    
</script>  
</head>
<body>
      <div style="width:95%" id="workQueuesTab">
          <ul>
              <li><a href="<c:url value="/workQueue/pending"/>">Pending</a></li>
              <li><a href="<c:url value="/workQueue/approved"/>">Approved</a></li>
              <li><a href="<c:url value="/workQueue/additionalSteps"/>">Additional Steps</a></li>
         </ul>
      </div>            
</body>

グリッドJSPコード：

<table width="100%">
    <tr>
        <td>
            <span style="font-size: 18px"><b>${status == 'pending' ? 'Pending': 'Approved'}</b></span><br/><br/>
            There are ${workQueueCount} referrals ${status}. Click a row to see details.<a href="<c:url value="/excelExport"/>" id="excelExport" style="float: right;">Export To Excel</a>               
        </td>
    </tr>
    <tr height="5px">
        <td>                            
        </td>
    </tr>
    <tr>
        <td>
            <table id="dartWorkQueueGrid"></table>                              
            <div id="dartWorkQueuePager"></div>
        </td>
    </tr>
</table>

グリッドJavascriptコード：

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

    $('#dartWorkQueueGrid').jqGrid('GridDestroy');
    $("#dartWorkQueueGrid").jqGrid({
        url:contextRoot+'workQueueGrid',
        datatype: 'json',
        jsonReader: {repeatitems: false},
        mtype: 'POST',
        colNames: ['ID','Received','Last Name','First Name','GO','Zone', 'Source', 'Status', 'AS Action', 'VP Report', 'Approved', 'Last Modified', 'Workflow'],
        colModel: [
                   { name: 'referralId', index: 'referralId', width: 30, sortable:true },
                   { name: 'receivedDate', index: 'receivedDate', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true },                   
                   { name: 'lastName', index: 'lastName', width: 55, sortable:true },
                   { name: 'firstName', index: 'firstName', width: 55, sortable:true },
                   { name: 'goCode', index: 'goCode', width: 30, sortable:true },
                   { name: 'zoneCode', index: 'zoneCode', width: 30, sortable:true },
                   { name: 'sourceName', index: 'sourceName', width: 40, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } },
                   { name: 'status', index: 'status', width: 40, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } },
                   { name: 'actionAS', index: 'actionAS', width: 30, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } },
                   { name: 'vpReportDate', index: 'vpReportDate', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true },
                   { name: 'approvedDate', index: 'approvedDate', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true },
                   { name: 'lastModifiedDate', index: 'lastModifiedDate', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true },
                   { name: 'workflow', index: 'workflow', width: 80, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } }
        ],loadError: function(xhr,st,err) {
            alert(err);
        },loadComplete: function (data) {
            var $this = $(this),
            datatype = $this.getGridParam('datatype');
            if (datatype === "xml" || datatype === "json") {
              setTimeout(function () {
                 $this.trigger("reloadGrid");
              }, 10);
           }
        },onSelectRow : function(rowid, status, e) {
            var selRow = $(this).getGridParam("selrow");
            var selReferralId = $(this).getCell(selRow, 'referralId');
            window.location = (contextRoot+"referralDetails?refId=" + selReferralId );            
        },
        pager: '#dartWorkQueuePager',
        sortname: 'receivedDate',
        sortorder: 'desc',
        gridview: true,
        viewrecords: true,
        loadonce: true,
        autowidth: true,
        shrinkToFit: true,
        height: 'auto',
        rowNum: 12,
        ignoreCase: true,
        altRows:true
    }); 

    $("#dartWorkQueueGrid").jqGrid('navGrid','#dartWorkQueuePager',
       {
        edit:false,
        add:false,
        del:false,
        search:false,
        refresh:false
    });

    $("#dartWorkQueueGrid").jqGrid('filterToolbar',
        { 
         stringResult: true, 
         searchOnEnter: false,
         defaultSearch: "cn"
    });
});

JSの注文には次のものが含まれます。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="<c:url value="/css/ui.jqgrid.css"/>" type="text/css" />
<link rel="stylesheet" href="<c:url value="/css/home.css"/>" type="text/css" />
<link rel="stylesheet" href="<c:url value="/css/styles-nyl.css"/>" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
<script type="text/javascript" src="<c:url value="/js/shared/grid.locale-en.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/shared/jquery.jqGrid.min.js"/>"></script> 
<script type="text/javascript" src="<c:url value="/js/shared/json2.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/shared/jquery.loadJSON.js"/>"></script>

サンプルデータ

  {"rows":[{"receivedDate":1357016400000,"referralId":23450,"lastName":"Smith","firstName":"John","goCode":"A99","zoneCode":"NE","sourceName":"Source Name","status":"Pending","actionAS":"AS Action","vpReportDate":1357016400000,"approvedDate":1357016400000,"lastModifiedDate":1357016400000,"workflow":"Recommendation(s) required"},{"receivedDate":1357102800000,"referralId":23451,"lastName":"Smith","firstName":"John","goCode":"A99","zoneCode":"NE","sourceName":"Source Name","status":"Pending","actionAS":"AS Action","vpReportDate":1357102800000,"approvedDate":1357102800000,"lastModifiedDate":1357102800000,"workflow":"Recommendation(s) required"},{"receivedDate":1357189200000,"referralId":23452,"lastName":"Smith","firstName":"John","goCode":"A99","zoneCode":"NE","sourceName":"Source Name","status":"Pending","actionAS":"AS Action","vpReportDate":1357189200000,"approvedDate":1357189200000,"lastModifiedDate":1357189200000,"workflow":"Recommendation(s) required"},

私はこの問題に何日も立ち往生していて、どこにも向かっていません。どんな助けでも深く感謝します！

4

1 に答える 1

1

エラー

jQuery.jgridがnullであるか、オブジェクトではありません

これは主に、jqGrid（i18n/grid.locale-en.jsおよびjquery.jqGrid.min.jsまたはjquery.jqGrid.src.js）またはjQueryJavaScriptファイルに必要なJavaScriptを間違った順序で含めたことを意味します。コードをjqGridドキュメントの例と比較する必要があります。

さらに、使用するjQuery、jQuery UI、jqGridの正確なバージョン番号を常に含めることをお勧めします。jquery.jqGrid.src.js（ではなく）を使用してテストを行い、エラーの行番号jquery.jqGrid.min.jsを投稿する必要があります。

更新：申し訳ありませんが、あなたが説明した問題を再現することはできません。デモをご覧ください。デモのソースを若者のものと比較することができます。おそらく、質問のテキストに含まれていないいくつかの違いがあります。

于 2013-03-11T15:33:19.737 に答える