-2

我想得到一个 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 验证

我希望有人能发现这个问题并告诉我为什么我的网格没有被填充。谢谢。

4

3 回答 3

2

代码中有一些小但重要的错误：

  • 您应该在元素<!DOCTYPE html ...>之前包含语句。<html>在您以后的代码中，您使用 XML 注释，例如<!-- Load CSS-->. 所以你想可能使用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 大小写。因为 use used<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上验证更改后的演示没有 HTML 错误，并且它也在网格中显示数据。

于 2012-08-16T17:15:30.443 回答
0

您缺少 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});     
});
于 2012-08-28T23:41:50.860 回答
0

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

于 2012-11-18T13:21:01.193 回答