2013-03-20 56 views
0

下面的html文件不会给出任何输出。这里提到的所有脚本和css文件都是有效的。请帮我解决这个问题。JQGrid - 无输出

当它在浏览器中加载时,它只给出一个空白页面。

<!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" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My First Grid</title> 

<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 

<script src="js/jquery-1.9.0.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> 
<script type="text/javascript"> 
var mydata = [ 
    { id : "one", "name" : "row one" }, 
    { id : "two", "name" : "row two" }, 
    { id : "three", "name" : "row three" } 
]; 

$("#grid").jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    width: 500, 
    colNames:['Id','Name'], 
    colModel:[ 
    {name:'id', index:'id', key: true, width:50}, 
    {name:'name', index:'name', width:100} 
    ], 
    pager: '#pager', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "asc", 
    caption:"jqGrid Example" 
}); 
</script> 

</head> 
<body> 
<table id="grid"><tr><td></td></tr></table> 
<div id="pager"></div> 
</body> 
</html> 
+0

你应该[“接受”](http://meta.stackexchange.com/a/5235/147495)一些答案。 – Oleg 2013-03-21 18:53:46

回答

0

原因是<table id="grid">在脚本执行时尚未创建。在关闭</body>之前将 $("#grid").jqGrid()转移到脚本块中。

或者您可以使用jQuery安排网格初始化页面元素初始化后:

$(document).ready(function() { $("#grid").jqGrid(...) }); 
+0

谢谢你的帮助。 – rajkumar600003 2013-03-20 12:53:11

1

你必须把$( “#电网”)的jqGrid()内的document.ready()。

<script> 

     $(document).ready(function (e) 
     { 

var mydata = [ 
    { id : "one", "name" : "row one" }, 
    { id : "two", "name" : "row two" }, 
    { id : "three", "name" : "row three" } 
]; 

$("#grid").jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    width: 500, 
    colNames:['Id','Name'], 
    colModel:[ 
    {name:'id', index:'id', key: true, width:50}, 
    {name:'name', index:'name', width:100} 
    ], 
    pager: '#pager', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "asc", 
    caption:"jqGrid Example" 
}); 

     }); 
</script> 
+0

谢谢你们的帮助。我是jquery的新手。 – rajkumar600003 2013-03-20 12:52:16

+0

如果你得到答案,请将其标记为正确的答案,并upvote我们.. :) – Sharun 2013-03-20 12:56:48