1

完成安装后不出现网格。我已经检查了所有，所有链接都很好。我已经安装了每个 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>
4

1 回答 1

0

在您发布的代码中至少可以看到两个非常重要的错误。第一个：你包含了同一个 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 数据的格式（请参阅文档）。

于 2012-11-14T17:21:51.510 回答