JQGrid無法正常工作

完成安裝後出現網格。我已經檢查了所有，並且所有鏈接都很好。我已經安裝了每個WIKI需要的文件。任何人有問題或成功將使用XAMPP？當我進入我的網站頁面時，我收到一個空白屏幕。我正在使用json數據，並且我已檢查以確保它也是有效的。幫助！JQGrid無法正常工作

<link href="jquery-ui-1.9.1.custom/css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" media="all" href="css/ui.jqgrid.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/ui.multiselect.css" /> 





<style> 
    html, body { 
     margin: 0;   /* Remove body margin/padding */ 
     padding: 0; 
     overflow: hidden; /* Remove scroll bars on browser window */ 
     font-size: 75%; 
    } 
    /*Splitter style */ 


    #LeftPane { 
     /* optional, initial splitbar position */ 
     overflow: auto; 
    } 
    /* 
    * Right-side element of the splitter. 
    */ 

    #RightPane { 
     padding: 2px; 
     overflow: auto; 
    } 
    .ui-tabs-nav li {position: relative;} 
    .ui-tabs-selected a span {padding-right: 10px;} 
    .ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;} 
    .ui-tabs-selected .ui-tabs-close {display: block;} 
    .ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;} 
    .ui-datepicker {z-index:1200;} 
    .rotate 
     { 
      /* for Safari */ 
      -webkit-transform: rotate(-90deg); 

      /* for Firefox */ 
      -moz-transform: rotate(-90deg); 

      /* for Internet Explorer */ 
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
     } 

</style> 

<script src="jquery-ui-1.9.1.custom/js/jquery-1.8.2.js"></script> 
<script src="jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script> 
<script src="js/jquery.layout.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $.jgrid.no_legacy_api = true; 
    $.jgrid.useJSON = true; 
</script> 

<script src="js/ui.multiselect.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.js" type="text/javascript"></script> 
<script src="js/jquery.tablednd.js" type="text/javascript"></script> 
<script src="js/jquery.contextmenu.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    jQuery("#list2").jqGrid(
    {  
     url:'jqgridExample.php', 
     datatype: "json", 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes', 'test'], 
    colModel:[ 
         {name:'id',index:'id', width:55}, 
         {name:'invdate',index:'invdate', width:90}, 
         {name:'name',index:'name asc, invdate', width:100}, 
         {name:'amount',index:'amount', width:80, align:"right"}, 
         {name:'tax',index:'tax', width:80, align:"right"},  
         {name:'total',index:'total', width:80,align:"right"},  
         {name:'note',index:'note', width:150, sortable:false}  
        ], 
    jsonReader : 
    {      
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager2', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    caption:"JSON Example" 
    }, 
    }); 
    jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false}); 
</script> 

<html> 
    <head> 

    </head> 

    <body> 
    <table id="list2"></table> 
    <div id="pager2"></div> 
    </body> 
</html>

來源

2012-11-14 user1824299

如果您使用Firefox，請安裝（如果您還沒有）螢火蟲，並檢查您是否在控制檯上發生任何錯誤？ – user1190992

至少有兩個非常重要的錯誤可以在您發佈的代碼中看到。第一個：你多次包括不同版本的相同的JavaScript。這是錯誤的。例如，兩行

<script src="jquery-ui-1.9.1.custom/js/jquery-1.8.2.js"></script> 
<script src="js/jquery.js" type="text/javascript"></script>

插入jQuery。接下來兩行

<script src="jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script> 
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>

插入jQuery UI。線

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

插入grid.locale-en.js。 jqGrid的主要模塊也將被插入兩次

<script src="js/jquery.jqGrid.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

你應該明白，取決於從哪個包含您可以有唯一的模塊工作的第一個版本，只有第二個版本每個JavaScript模塊的實現來自兩個版本的相同模塊的非工作組合。所以你應該只包含每個JavaScript模塊一次。

接下來的問題是你在錯誤的地方包含了jqGrid的選項。取而代之的

jsonReader : 
{      
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager2', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    caption:"JSON Example" 
},

你應該使用

jsonReader : {}, 
rowNum:10, 
rowList:[10,20,30], 
pager: '#pager2', 
sortname: 'id', 
viewrecords: true, 
sortorder: "desc", 
caption:"JSON Example"

，你應該指定jsonReader值所對應的從服務器返回的JSON數據的格式（見the documentation）。

來源

2012-11-14 17:21:51 Oleg

JQGrid無法正常工作

回答

相關問題