jqgrid过滤器工具栏不起作用答案

【问题标题】：jqgrid filter toolbar not workingjqgrid过滤器工具栏不起作用
【发布时间】：2013-03-06 15:03:28
【问题描述】：

我正在尝试在我的 jqgrid 中实现过滤器工具栏。但是，每当我在任何一个过滤器工具栏搜索框中输入任何内容时，“加载”弹出窗口都会出现并停留在那里，然后什么也没有发生。下面是截图：

下面是我的 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>

这是 Handler 方法：

        @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;
    }

}

更新 3 选项卡内的网格快照：

更新 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>

【问题讨论】：

根据我过去的经验，您描述的问题发生在发生服务器错误时。您是否收到来自服务器的有效响应？
@Kyle 我正在实施客户端过滤。数据正在从服务器加载正常，这就是它显示在网格中的原因。我也没有收到任何服务器错误。
@Kyle 我已经使用从服务器返回的示例 JSON 数据更新了问题。
感谢您提供示例数据。我复制/粘贴了您的代码和示例数据，但无法重现您的问题。您使用的是什么版本的 jqGrid/jQuery？我正在使用 jqGrid 4.4.4 和 jQuery 1.8.2
@Kyle 我正在使用 jqGrid 4.4.1 和 jQuery 1.10.0 我还检查了我收到以下错误：Uncaught TypeError: Cannot call method 'getAccessor' of undefined (anonymous function) (匿名函数) v.extend.each jquery.min.js:2 执行 select la G b.before.click.bind.dblclick.A v.event.dispatch jquery.min.js:2 o.handle.u jquery.min .js:2 v.event.trigger jquery.min.js:2（匿名函数） jquery.min.js:2 v.extend.each jquery.min.js:2 v.fn.v.each jquery.min。 js:2 v.fn.extend.trigger jquery.min.js:2 e（匿名函数）

标签： java jquery jqgrid

【解决方案1】：

我遇到了同样的问题。在文件 jquery.jqGrid.js 中，

它通过 jQuery 调用 jQuery。看起来您的设置无法以这种方式识别它。尝试更改 jQuery。到 $。文件中的所有位置。

它确实对我有用。

Uncaught TypeError: Cannot call method 'getAccessor' of undefined（它不理解 jQuery。但它理解 $。）

【讨论】：