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>
答
您需要加载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库。你的例子在这里工作。 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）或版本 Oleg