JQGrid未顯示

我正在嘗試使用JQGrid，如http://trirand.com/blog/jqgrid/jqgrid.html。但它沒有顯示任何東西。請幫助我做到這一點。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>

來源

2017-02-21 SaikiHanee

嘗試導入的jqGrid庫。你的例子在這裏工作。 http://jsfiddle.net/vwb1c0mk/143/ – Zzap

你應該格式化代碼，以便人們可以閱讀它。當前代碼包含**語法錯誤**：'colModel'中'total'和'note'列之間缺少逗號。這是一個輸入錯誤，那麼你應該包含從他'url'返回的JSON數據。您應該在所有關於jqGrid的問題中包含關於jqGrid的版本**的信息，您可以使用它（可以使用）和** fork **（[free jqGrid]（https://github.com/free- jqGrid/jqGrid），商業版[Guriddo jqGrid JS]（http://guriddo.net/?page_id=103334）或版本<= 4.7中的舊版jqGrid）。 – Oleg

您需要加載jqGrid的JavaScript庫，然後才能使用這些功能。請從http://www.trirand.com/blog/?page_id=6下載腳本並將它們添加到腳本中。（負載加載jQuery的右後腳本）

或只補充一點：

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

希望這有助於:)

來源

2017-02-21 11:40:53

回答

相關問題