Question

我正在尝试使用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>

Answer 1

您需要先加载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>

希望有所帮助：）

JQGrid没有显示

1 个答案: