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 に答える