1

インストール完了後、グリッドが表示されません。すべてチェックしましたが、すべてのリンクは良好です。WIKI ごとに必要なファイルをインストールしました。XAMPPを使用して問題が発生したり、成功したりする人はいますか? Web サイトのページに移動すると、空白の画面が表示されます。私は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

あなたが投稿したコードには、少なくとも 2 つの非常に重要なエラーが見られます。最初のもの:同じ 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 のメイン モジュールも 2 回挿入されます

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

含めたすべての JavaScript モジュールの実装に依存することを理解する必要があります。モジュールの最初のバージョンのみが動作するか、同じモジュールの 2 つのバージョンからの非動作ミックスの 2 番目のバージョンのみが動作する可能性があります。したがって、すべての 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 に答える