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

파이어 폭스를 사용하는 경우, 아직 파이어 버그를 설치하지 않았 으면 설치하고 콘솔에서 오류가 있는지 확인하십시오. – 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>

insert 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>

두 번도 삽입됩니다 같은 모듈의 두 버전에서 비 작동 믹스. 따라서 한 번만 모든 자바 스크립트 모듈을 포함해야합니다.

다음 문제는 의 잘못된 장소에 jqGrid 옵션을 포함 시켰습니다.입니다. 대신

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

당신은 (the documentation 참조)가 지정해야 jsonReader의 값이 서버에서 반환되는 JSON 데이터의 형식을 해당

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

를 사용해야합니다.

출처

2012-11-14 17:21:51 Oleg

JQGrid가 작동하지 않습니다.

답변

관련 문제