Question

我想得到一个jqgrid的例子。我按照“书”做了所有事情，但它不起作用。如果你能发现故障那就太好了。这是基于trirand的演示网站。

PS：所有文件路径都经过三重检查。他们都指向正确的地方。

HTML / JS：

<html>
<head>
<title>Example Grid</title>
<!-- Load CSS--><br />
<link rel="stylesheet" href="css/ui.jqgrid.css" type="text/css" media="all" />
<!-- For this theme, download your own from link above, and place it at css folder -->
<link rel="stylesheet" href="jquery-ui-1.8.22.custom/css/smoothness/jquery-ui-1.8.22.custom.css" type="text/css" media="all" />
<!-- Load Javascript -->
<script src="jquery-ui-1.8.22.custom/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.22.custom/js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="testgrid"></table>
<div id="exampleGrid"></div>
<script language="javascript">
jQuery("#testgrid").jqGrid({
    url:'test.txt',
    datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    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}       
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#examplegrid',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#testgrid").jqGrid('examplegrid','#examplegrid',{edit:false,add:false,del:false});
</script>
</body>
</html>

test.txt的内容：

{"page":"1","total":2,"records":"13","rows":[{"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]},{"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]},{"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]},{"id":"10","cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]},{"id":"9","cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]},{"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]},{"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]},{"id":"6","cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]},{"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]},{"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]}],"userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}}

此字符串是完美的JSON字符串，也在JSONlint.com验证

我希望有人能够发现问题并告诉我为什么我的网格不会被填充。感谢。

Answer 1

您在代码中遇到一些小但重要的错误：

您应该在<!DOCTYPE html ...>元素之前添加<html>语句。在以后的代码中，您使用之类的XML注释。所以你想要使用XHTML。在这种情况下，您应该将<html>替换为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

下一个问题：您应该删除<br />

<head>

您应该包含声明文档的编码，如

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

你应该使用正确的id。由于使用了<div id="exampleGrid"></div>，您必须在后面的代码中使用'#exampleGrid'而不是'#examplegrid'
代码jQuery("#testgrid").jqGrid('examplegrid',...);是错误的，它会产生异常，因为jqGrid中没有方法'examplegrid'。你想做的是jQuery("#testgrid").jqGrid('navGrid',...);
要绝对更正XHTML文档，您应将<table id="testgrid"></table>更改为<table id="testgrid"><tr><td/></tr></table>

您可以在validator.w3.org上验证更改后的the demo没有HTML错误，并且它也会在网格中显示数据。

Answer 2

您缺少一个json阅读器，例如：

$(function(){ 

$("#list").jqGrid({
url : "<s:url action='tabla-historial-director' />",
datatype: 'json',
jsonReader: {
    root: 'gridModel',
    id: 'idTT',
    repeatitems: false,
},
resize: false,
hidegrid: false,
data: 'trabajosTerminales',
mtype: 'POST',
height: 'auto',
colNames:['No. de Registro', 'Título', 'Tipo', 'Periodo'],
colModel :[ 
  {name:'numRegistro', index:'titulo', search: 'true', stype:'text', align:'center', searchrules:{required:true},  width:100  },
  {name:'titulo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true},  width:800  },
  {name:'tipo', key:'true', index:'tipo', search: 'true', stype:'text',align:'center', searchrules:{required:true},  width:100  },
  {name:'periodo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true},  width:100  },
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
viewrecords: true,
gridview: true,
caption: 'Trabajos Terminales dirigidos',
}); 

jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false});     
});

Answer 3

从配置中删除“gridview”。至少它对我有用。

无法从JSON填充jqGrid

3 个答案: