Question

我正在尝试使用jqgrid和spring mvc。当我运行应用程序时，网格不显示，我观察到控制器本身未到达。下面是我的jqgrid代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="/resources/mytheme/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/resources/mytheme/css/jqgrid/i.jqgrid.css" />

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script src="/resources/mytheme/js/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/resources/mytheme/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/resources/mytheme/js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
    $("#list").jqGrid({
        url: "Ebus/crud",
        datatype: "json",
        mtype: "GET",
        colNames: ["Id", "FirstName", "LastName"],
        colModel: [
            { name: "id", width: 55 },
            { name: "firstName", width: 90 },
            { name: "lastName", width: 80, align: "right" }
        ],
        pager: "#pager",
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "id",
        sortorder: "firstName",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        jsonReader : {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "id"
        },
        caption: "My first grid"
    }); 
}); 
</script>

</head>
<body>
<h1>jqgrid example</h1>
    <table id="list"><tr><td></td></tr></table> 
    <div id="pager"></div> 
</body>
</html>

以下是我的控制器

 @RequestMapping(value="/users" ,method = RequestMethod.GET)
    public @ResponseBody  CustomUserResponse getAll(
    ) {
        System.out.println("Received request to get all users");
        List<LoginForm> users = loginService.getUsers();
        CustomUserResponse response = new CustomUserResponse();
        response.setRows(users);
        response.setRecords( String.valueOf(users.size()) );
        response.setPage( "1" );
        response.setTotal( "10" );
        return response;
    }

我的CustomUserResponse代码是

public class CustomUserResponse {

    private String page;
    private String total;
    private String records;
    private List<LoginForm> rows;

    public CustomUserResponse() {
    }

    public String getPage() {
        return page;
    }

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

    public String getTotal() {
        return total;
    }

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

    public String getRecords() {
        return records;
    }

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

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

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

Answer 1

我自己不使用Spring，所以我无法帮助您使用服务器代码。我仍然在你的代码中看到一些明显的问题。

您加入了.../css/jqgrid/i.jqgrid.css而不是ui.jqgrid.css。所以我想你没有加载所需的CSS。
您使用非常旧的 jQuery UI 1.8.6。为什么需要使用这种复古版本的jQuery UI？
你包括非常非常陈旧的 jQuery 1.4.4，现在只应该在博物馆中。当前版本的jqGrid支持jQuery，从jQuery 1.7.2开始，但严格建议使用当前的1.11.2或2.1.3版本
您没有包含信息您使用的jqGrid版本。在每个故障排除案例中都非常重要。
我在服务器代码中没有看到服务器端分页或排序的任何实现。您只需设置总计10而不对List<LoginForm> users中的输入参数或实际项目数进行任何测试。如果网格中没有那么多项（例如少于1000），那么您可以在服务器响应中返回所有项的数组，并使用jqGrid的loadonce: true选项。
我建议您使用Fiddler或IE / Chrome / Firefox的开发者工具（按 F12 启动）来跟踪服务器和客户端之间的HTTP流量。我想您使用的选项url: "Ebus/crud"是错误的。跟踪将帮助您更好地了解从客户端发送到服务器并返回的内容。通过故障排除非常有帮助。
我建议您在jqGrid选项列表中包含loadError回调。有关详细信息，请参阅the old answer。

jqgrid页面显示为空白（甚至不显示标题）

1 个答案: