jqGrid:undefined不是一个函数

时间:2015-03-20 05:05:04

标签: javascript jquery css jqgrid

目前,我正试图让一个基本的网格显示在屏幕上。在jqGrid wiki之后,我链接到/创建了必要文件的脚本。在我下载的jqGrid zip中没有css文件,这是jquery-ui-1.8.18.custom.css。我必须单独找到并添加它。 目前,我有:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen"   href="../Guriddo_jqGrid_JS_4.7.1/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="../Guriddo_jqGrid_JS_4.7.1/css/jquery-ui-1.8.18.custom.css"/>

<script src="../jquery-1.11.2.js" type="text/javascript"></script>
<script src="../Guriddo_jqGrid_JS_4.7.1/js/i18n/grid.locale-en.js" type="text/javascript"</script>
<script src="../Guriddo_jqGrid_JS_4.7.1/js/jquery.jqGrid.min.js" type="text/javascript"</script>
<script>
$(document).ready(function(){
    $("h1").click(function(){
        $(this).hide();
    });

});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(function(){
        $("#list").jqGrid({
            url: "loadform.php",
            datatype: "json",
            mtype: "GET",
            colNames: ["Name", "Social Security Number", "Date of Birth", "Income"],
            colModel: [
            {name: "name", width: 100},
            {name: "ssn", width: 100},
            {name: "dob", width: 100},
            {name: "income", width: 100}
            ],
            rowNum: 5,
            autoencode: true
       })
    });
});

</script>

</head>
<body>
    <center><h1>Scrolling Data Form With jQuery</h1>
    <table id="list"><tr><td></td></tr></table>

</body>
</html>

我不确定我所包含的文件是否无效,或者是否未被访问,或者我是否未包含所有必需的文件等。

1 个答案:

答案 0 :(得分:1)

您的脚本标记使用不正确,

<script src="../Guriddo_jqGrid_JS_4.7.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../Guriddo_jqGrid_JS_4.7.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>

另外,尝试更改jqGrid的顺序会在grid.locale-en.js之后加载jquery.jqGrid.min.js

另外,请验证您是否在firebug的脚本选项卡中包含了库(2个以上的文件+ jquery)。

此外,在您的代码中,您使用了$.ready() 2次,您可以删除下面的任何一个

// remove any 1 line, from the below
$(document).ready(function() { // ready function
  $(function(){ // ready shorthand