2013-03-06 273 views
0

我想在我的jqgrid中實現過濾器工具欄。 但是,無論何時在任何一個過濾器工具欄搜索框中輸入任何內容,「加載」彈出窗口都會出現並停留在那裏,然後什麼也沒有發生。下面是快照:jqgrid過濾器工具欄不工作

The Error

下面是我的jqGrid代碼:

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

    $('#workQueueGrid').jqGrid('GridDestroy'); 
    $("#workQueueGrid").jqGrid({ 
     url:contextRoot+'workQueueGrid', 
     datatype: 'json', 
     mtype: 'POST', 
     colNames: ['ID','Received','Last Name','First Name','Aa','Bbbb', 'Source', 'Ddddd', 'Ccccc', 'Eeeeee', 'Fffffff', 'Ggggggg', 'Hhhhhhh'], 
     colModel: [ 
        { name: 'Id', 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: 'data1', index: 'data1', width: 30, sortable:true }, 
        { name: 'data2', index: 'data2', width: 30, sortable:true }, 
        { name: 'data3', index: 'data3', width: 40, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } }, 
        { name: 'data4', index: 'data4', width: 30, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } }, 
        { name: 'data5', index: 'data5', width: 40, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } }, 
        { name: 'data6', index: 'data6', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true }, 
        { name: 'data7', index: 'data7', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true }, 
        { name: 'data8', index: 'data8', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true }, 
        { name: 'data9', index: 'data9', width: 80, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } } 
     ],loadError: function(xhr,st,err) { 
      alert(err); 
     },onSelectRow : function(rowid, status, e) { 
      var selRow = $(this).getGridParam("selrow"); 
      var selReferralId = $(this).getCell(selRow, 'referralId'); 
      window.location = (contextRoot+"referralDetails?refId=" + selReferralId);    
     }, 
     jsonReader: { 
      repeatitems: false, 
     }, 
     pager: '#workQueuePager', 
     sortname: 'receivedDate', 
     sortorder: 'desc', 
     gridview: true, 
     viewrecords: true, 
     loadonce: true, 
     autowidth: true, 
     shrinkToFit: true, 
     height: 'auto', 
     rowNum: 12, 
     ignoreCase: true, 
     altRows:true 
    }); 

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

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

樣本數據:

{"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"}, 

不知道,我是什麼在這裏失蹤?!?

更新1:

Below is the error I'm getting: 

Uncaught TypeError: Cannot call method 'getAccessor' of undefined 

更新2

以下爲JSP:

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> 
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<html> 
<head> 
    <script type="text/javascript" src="<c:url value="/js/workQueue.js"/>"></script> 
    <style type="text/css"> 
     th.ui-th-column div { 
      white-space:normal !important; 
      height:auto !important; 
      padding:2px; 
    } 
    </style>  
</head> 
<body> 
    <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> 
</body> 
</html> 

這是處理程序方法:

 @RequestMapping(method = RequestMethod.POST, value = "/workQueueGrid") 
    @ResponseBody 
    public JqgridResponse loadWorkQueue() { 
     this.referrals = dartService.getReferralCases(status);  
     JqgridResponse response = new JqgridResponse(); 
     response.setRows(referrals); 

     return response; 
    } 

這是JqgridResponse.java:

package com.nyl.corp.disciplinaryactions.web; 

import java.util.List; 

public class JqgridResponse { 

    public JqgridResponse(List<?> rows) { 
     this.rows = rows; 
    } 

    public JqgridResponse() { 
    } 

    private List<?> rows; 

    private int page; 

    private int total; 

    private int records; 

    public void setRows(List<?> rows) { 
     this.rows = rows; 
    } 

    public List<?> getRows() { 
     return rows; 
    } 

    public int getPage() { 
     return page; 
    } 

    public void setPage(int page) { 
     this.page = page; 
    } 

    public int getTotal() { 
     return total; 
    } 

    public void setTotal(int total) { 
     this.total = total; 
    } 

    public int getRecords() { 
     return records; 
    } 

    public void setRecords(int records) { 
     this.records = records; 
    } 

} 

UPDATE翼片內部3 快照柵格的:

enter image description here enter image description here

更新4 標籤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> 
+0

從我過去的經驗,當出現服務器錯誤您所描述的問題發生。您是否收到來自服務器的有效回覆? – Kyle 2013-03-06 15:05:14

+0

@Kyle我正在實施客戶端過濾。數據從服務器上正常加載,這就是爲什麼它會顯示在網格中。此外,我沒有收到任何服務器錯誤。 – tarares 2013-03-06 15:29:19

+0

@Kyle我已經更新了從服務器返回的示例JSON數據的問題。 – tarares 2013-03-06 16:00:42

回答

0

我有同樣的問題。在文件jquery.jqGrid.js中,

它通過jQuery調用jQuery。看起來你的設置不會以這種方式識別它。嘗試改變jQuery。到$。文件中的任何地方。

它確實爲我工作。

遺漏的類型錯誤:無法調用未定義的方法「getAccessor」(它不明白jQuery的,但它確實$。)