Question

完成安装后没有网格。我检查了所有，所有链接都很好。我已经安装了每个WIKI需要的文件。有没有人有问题或成功使用XAMPP？当我进入我的网站页面时，我得到一个空白的屏幕。我正在使用json数据，我已经检查以确保它也是有效的。帮助！

<link href="jquery-ui-1.9.1.custom/css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/ui.multiselect.css" />





<style>
    html, body {
        margin: 0;          /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;   /* Remove scroll bars on browser window */  
        font-size: 75%;
    }
    /*Splitter style */


    #LeftPane {
        /* optional, initial splitbar position */
        overflow: auto;
    }
    /*
     * Right-side element of the splitter.
    */

    #RightPane {
        padding: 2px;
        overflow: auto;
    }
    .ui-tabs-nav li {position: relative;}
    .ui-tabs-selected a span {padding-right: 10px;}
    .ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
    .ui-tabs-selected .ui-tabs-close {display: block;}
    .ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
    .ui-datepicker {z-index:1200;}
    .rotate
        {
            /* for Safari */
            -webkit-transform: rotate(-90deg);

            /* for Firefox */
            -moz-transform: rotate(-90deg);

            /* for Internet Explorer */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

</style>

<script src="jquery-ui-1.9.1.custom/js/jquery-1.8.2.js"></script>
<script src="jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>

<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery("#list2").jqGrid(
    {       
      url:'jqgridExample.php',
        datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes', 'test'],
    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}       
                     ],
   jsonReader : 
   {                     
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
  },
    });
    jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
</script>

<html>
    <head>

    </head>

    <body>
    <table id="list2"></table>
    <div id="pager2"></div>
    </body>
</html>

Answer 1

您发布的代码中至少有两个非常重要的错误。第一个：您包含多次相同JavaScript的不同版本。这是错误的。例如两行

<script src="jquery-ui-1.9.1.custom/js/jquery-1.8.2.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>

插入jQuery。下一行

<script src="jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>

插入jQuery UI。行

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

插入grid.locale-en.js。 jqGrid的主要模块也会用

插入两次

<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

您应该理解，依赖于您所包含的每个JavaScript模块的实现，您可以只使用模块的第一个版本，而只使用相同模块的两个版本的非工作混合的第二个版本。因此，您应该只包含每个JavaScript模块。

下一个问题是你在错误的地方包含了jqGrid的选项。而不是

jsonReader : 
{                     
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
   caption:"JSON Example"
},

你应该使用

jsonReader : {},
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"

您应指定的jsonReader值对应于将从服务器返回的JSON数据的格式（请参阅the documentation）。

JQGrid无法正常工作

1 个答案: