2013-07-29 92 views
0

問題是jqgrid中的分頁圖標不可見。我可以看到在我的控制檯中找不到.png圖像。Jqgrid分頁圖標丟失

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) 

即使寬度爲'auto',也會出現水平滾動條。

數據正確加載,我的數據庫分頁工作正常。在第一頁上,只有手形圖標是可見的,點擊後會轉到第2頁,但在第2頁上沒有圖標可見。

我下載的jqGrid一次,但沒有巴紐圖標都在那裏安裝

我的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

我發現影像不是從我安裝的版本下載來自jqgrid網站。不知道爲什麼。所以我從互聯網上手動下載圖片,工作得很好。