2016-01-24 87 views
0

因此,我正在嘗試使用jqGrid並且看起來似乎無法顯示navgrid。我已經搜索並嘗試了很多東西,但都沒有成功。我不確定發生了什麼事。任何幫助,將不勝感激。這裏是我的代碼:無法讓navgrid顯示在網格上

 <html> 
     <title>User List</title> 
     <head> 
     <meta charset=UTF-8" /> 

      <link rel="stylesheet" type="text/css" media="screen" href="../../jqgrid/js/themes/lightness/jquery-ui.custom.css"></link> 
      <link rel="stylesheet" type="text/css" media="screen" href="../../jqgrid/css/ui.jqgrid.css"></link> 
      <link rel="stylesheet" type="text/css" media="screen" href="../shared/base.css" /> 

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


     </head> 

     <body> 

      </div> 
      <script type="text/javascript"> 
      $(function() { 
        $('#userGrid').jqGrid({ 
         pager:'#userPager', 
         url: 'getUserListData.php', 
         mtype: 'GET', 
         datatype: 'json', 
         colNames:['Rec Id', 'User Id', 'Name', 'eMail', 'Type'], 
         colModel:[ 
           {name:'rec_id', hidden: true }, 
           {name:'user_id', width: 100, sortable: true, editable: true, search: true }, 
           {name:'user_name', sortable: true, editable: true, search: true }, 
           {name:'email_address', editable: true }, 
           {name:'user_type', width: 60, sortable: true, editable: true, search: true }], 

         viewrecords: true, 
         width: 630, 
         gridview: true, 
         altRows: true, 
         sortname: 'user_name', 
         sortorder: 'asc', 
         rowNum: 10 

       }); 
      }); 
       jQuery("#userGrid").jqGrid('navGrid', '#userPager', 
        { add: true, edit: true, del: true }); 

      </script> 

      <table id="userGrid"><tr><td></td></tr></table> 
      <div id="userPager"></div> 

     </body> 
     </html> 

感謝您的任何幫助。

回答

0

代碼調用navGrid出塊$(function() {...});,這是你的問題的由來。因此,您嘗試在之前創建導航條,創建網格。

釷解決您需要的問題只需將navGrid的呼叫前一行(在$(function() {...});內部)。

您應該考慮使用jsonReader: { id: "rec_id" }並刪除不需要的隱藏列rec_id。你不寫你使用哪個版本的jqGrid。

我會建議你將腳本移動到<head>之內。或者,您可以在<table id="userGrid"><tr><td></td></tr></table><div id="userPager"></div>之後移動它並刪除$(function() {...});塊。