缺少Jqgrid分页图标

时间:2013-07-29 14:20:25

标签: jqgrid

问题是jqgrid中的分页图标不可见。我可以看到在我的控制台中找不到.png图像。

GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)

即使宽度为“自动”,也会出现水平滚动条。

数据加载正确,我的数据库分页工作正常。在第一页上只有手形图标可见,单击时转到第2页。但在第2页上没有图标可见。

我再次下载了jqgrid,但安装中没有.png图标

我的jsp代码如下 -

<html>
<head>

<style>

div.ui-jqgrid-titlebar {
    height: 10px;
}


        #sidebar {
            float: left;
            width: 150px;
            padding: 10px 10px;
           // background-color:yellow
        }


        #container {
            margin: 0px 320px 0px 170px;
            text-align: center;
           // background-color:red
        }



</style>

<link rel="stylesheet" href="../styles/ui.all.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../styles/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="../styles/ui.jqgrid.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/grid.locale-en.js"></script>
     <script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
    <link href="../images/favicon.ico"  type="image/x-icon" rel="shortcut icon">
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>


<script type="text/javascript">
//index is used to override the column name passed to the server in the query param sidx
        var myColModel = [
                        { name: "promId", index: 'Promotionid', width: 60 },
                        { name: "promoCode", index: 'promotioncode', width: 110 },
                        { name: "name", index: 'name', width: 160 },
                        { name: "description", index: 'description', width: 250 },
                        { name: "distCode", index: 'distributor_code', width: 110 },
                        { name: "status", index: 'status', width: 110 },
                        { name: "startDate", index: 'start_date', width: 100, sorttype: "date", align: "right" },
                        { name: "endDate", index: 'end_date', width: 100, sorttype: "date", align: "right" },
                        { name: "discount", index: 'discount', width: 90 },
                        { name: "extension", index: 'extension', width: 90 }
                    ];

            $(function () {
                $("#list").jqGrid({
                    url: 'some/url',
                    datatype: "json",
                    mtype: "GET",
                    colNames: ["Promo ID", "Promo Code", "Name", "Description", "Distributor Code", "Status", "Start Date", "End Date", "Discount", "Extension"],
                    colModel: myColModel,
                    pager: "#pager",
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: "end_date",
                    sortorder: "asc",
                    viewrecords: true,
                    gridview: true,
                    rownumber: true,
                    autoencode: true,
                    width: 'auto',
                    height: 'auto',
                    caption: "Promotion Summary"
                });

            }); 


</script>    
</head>   

<br></br>
<body>
    <br>
    <br>

    <center>
        <hr />
        <div class="clear">
            <%@ include file="header.jsp"%>
        </div>
    </center>
    <div class="sidebar">
        <%@ include file="/admin/User.jsp"%>
    </div>
    <br>
    <br>



    <div id="container" border="2px solid green"
        style="left: 5%; position: relative;">

        <div id="tableContent" width="100%">
            <div>Summary</div>
            <div style = "margin: 0px auto 0px 150px;">
                <table id="list"><tr><td></td></tr>
                </table>
                <div id="pager"></div>
            </div>

        </div>
    </div>


    </div>

    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我发现图像不是从我从jqgrid网站安装的版本下载的。不知道为什么。所以我手动从互联网上下载图像并且工作正常。