2017-02-21 2 views
0

http://trirand.com/blog/jqgrid/jqgrid.html과 같이 JQGrid를 사용하려고합니다. 하지만 아무 것도 표시하지 않습니다. 이 일을하도록 도와주세요.JQGrid가 표시되지 않습니다.

<html> 
<head> 
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      jQuery("#s3list").jqGrid({ 
       url:'search.php?q=1', 
       datatype: "json", 
       width: 700, colNames:[ 
       'Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
       colModel:[ 
        {name:'id',index:'id', width:65}, 
        {name:'invdate',index:'invdate', width:90, 
         searchoptions:{ 
         dataInit:function(el) { 
          $(el).datepicker({dateFormat:'yy-mm-dd'}); 
         } }}, 
        {name:'name',index:'name', width:100}, 
        {name:'amount',index:'amount', width:80, align:"right"}, 
        {name:'tax',index:'tax', width:80, align:"right", stype:'select', 
         editoptions:{value:":All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00"}}, 
        {name:'total',index:'total', width:80,align:"right"} 
        {name:'note',index:'note', width:150, sortable:false} 
       ], 
       rowNum:10, 
       mtype: "POST", 
       rowList:[10,20,30], 
       pager: '#s3pager', 
       sortname: 'id', 
       viewrecords: true, 
       rownumbers: true, 
       sortorder: "desc", 
       gridview : true, 
       caption:"Toolbar Search Example" 
      }); 
      jQuery("#s3list").jqGrid('navGrid','#s3pager', 
       {edit:false,add:false,del:false,search:false,refresh:false}); 
      jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager", { 
       caption:"Toggle", 
       title:"Toggle Search Toolbar", 
       buttonicon :'ui-icon-pin-s', 
       onClickButton:function(){ 
        mygrid[0].toggleToolbar() 
       } 
      }); 
      jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager", { 
       caption:"Clear", 
       title:"Clear Search", 
       buttonicon :'ui-icon-refresh', 
       onClickButton:function(){ 
        mygrid[0].clearToolbar() 
       } 
      }); 
      jQuery("#s3list").jqGrid('filterToolbar'); 
     }); 
</script>  
</head> 
<body> 
    <table id="s3list"></table> 
     <div id="s3pager"></div> 
     <div id="filter" style="margin-left:30%;display:none">Search Invoices</div>  
</body> 
</html> 
+0

한번에 가져 오기있는 jqGrid 라이브러리 도움이

<script type="text/javascript" src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script> 

희망. 당신의 본보기가 여기에서 일하고 있습니다. http://jsfiddle.net/vwb1c0mk/143/ – Zzap

+0

사람들이 읽을 수 있도록 코드를 포맷해야합니다. 현재 코드에 ** 구문 오류 ** :'colModel'의'total'과'note' 열 사이에 쉼표가 없습니다. 입력 오류 였기 때문에 'url'에서 반환 된 JSON 데이터를 포함해야합니다. jqGrid에 관한 모든 질문에는 ** 사용할 수있는 ** jqGrid 버전 ** ** 포크 ** ([free jqGrid] (https://github.com/free- jqGrid/jqGrid), 상업용 [Guriddo jqGrid JS] (http://guriddo.net/?page_id=103334) 또는 이전 jqGrid 버전이 4.7 이하인 경우). – Oleg

답변

0

이러한 기능을 사용하려면 먼저 jqGrid javascript 라이브러리를로드해야합니다. http://www.trirand.com/blog/?page_id=6에서 스크립트를 다운로드하여 스크립트에 추가하십시오.

을 (당신이 jQuery를로드 직후 스크립트를로드)하거나이를 추가합니다 :)