0

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

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

<!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>
4

2 回答 2

1

您必须将 $("#grid").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>
于 2013-03-20T12:25:36.950 回答
0

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

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

$(document).ready(function() { $("#grid").jqGrid(...) });
于 2013-03-20T12:22:30.267 回答