jqGrid JSONデータがテーブルに表示されない

javascript jqgrid jquery plugins
jqGrid JSONデータがテーブルに表示されない

次のようにテーブルにJSONデータを表示したい:http://www.trirand.com/blog/jqgrid/jqgrid.html[example]

私はそのCSSインポートを使用しました:

JSがインポートするもの:

    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;

(ファイルによっては名前が異なりますが、大丈夫です)

URLからJSONデータを取得していますが、チェックするとFirebugに正しく表示されます。 それが私のHTMLデータです。

それはデータを取り込むための私のスクリプトです:

jQuery("#confTable").jqGrid({ ajaxGridOptions : {type:"GET"}, serializeGridData : function(postdata) {
            postdata.page = 1;
            return postdata;
        }, url:'/ui/webapp/conf', datatype: 'json', colNames:['Value','Type', 'Target Module', 'Configuration Group', 'Name', 'Description', 'Identity', 'Version', 'System Id', 'Active'],
            colModel:[
                {name:'value',index:'value', width:55},
                {name:'type',index:'type', width:55},
                {name:'targetModule',index:'targetModule', width:150},
                {name:'configurationGroup',index:'configurationGroup', width:180},
                {name:'name',index:'name asc', width:90},
                {name:'description',index:'description', width:90},
                {name:'identity',index:'identity', width:90},
                {name:'version',index:'version', width:90},
                {name:'systemId',index:'systemId', width:100},
                {name:'active',index:'active', width:100}
            ], rowNum:10, width:980, rowList:[10,20,30], pager: '#pconfTable', sortname: 'name', viewrecords: true, sortorder: "desc", caption:"Configuration Information" });
        jQuery("#pconfTable").jqGrid('navGrid', '#pconfTable', {edit:false,add:false,del:false});

それは私が取得するJSONデータです:

[{
        "value":"10",
        "type":"Tip 1",
        "targetModule":"Target 1",
        "configurationGroup":null,
        "name":"Configuration Deneme 1",
        "description":null,
        "identity":"Configuration Deneme 1",
        "version":0,
        "systemId":0,
        "active":true
    },
    {
        "value":"50",
        "type":"Tip 2",
        "targetModule":"Target 2",
        "configurationGroup":null,
        "name":"Configuration Deneme 2",
        "description":null,
        "identity":"Configuration Deneme 2",
        "version":0,
        "systemId":0,
        "active":true
    },
    {
        "value":"100",
        "type":"Tip 3",
        "targetModule":"Target 3",
        "configurationGroup":null,
        "name":"Configuration Deneme 3",
        "description":null,
        "identity":"Configuration Deneme 3",
        "version":0,
        "systemId":0,
        "active":true
    }
]

読みやすいようにインデントをフォーマットしました。

ただし、Firebugからエラーが表示されることはなく、空のテーブルが残っているファイルをインポートすることもできません。

何か案は?

  • PS:* JSONデータに何か問題はありますか。データは⇒ total:xxx、page:yyy、records:zzz、rows:or not a mustなどのように開始する必要がありますか?

  0  0


ベストアンサー

グリッドが満たされていることを確認するには、追加のjqGridパラメーターとして次のhttp://www.trirand.com/jqgridwiki/doku.php?id=wiki%3aretrieving_data#jsonreader_as_function[jsonReader]を使用する必要があります

jsonReader: {
    repeatitems: false,
    id: "value",
    root: function (obj) { return obj; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.length; }
}

'value'`カラムの値は一意だと思うので、上記の jsonReader`で `id:” value “`を使用しました。

ちなみに、 ajaxGridOptions:{type:" GET "}`は何もしません。 デフォルトの `mtype: 'GET'`は同じことをします。 `navGrid`メソッドの呼び出しでは、 jQuery( “#pconfTable”) の代わりに jQuery( “#confTable”) `を使用する必要があります。

説明の変更後、次のhttp://www.ok-soft-gmbh.com/jqGrid/kamaci.htm[demo]が作成されます。 デモでは、グリッドの空スペースを減らすために「height: ‘auto’」を追加しました。

2


タイトルとURLをコピーしました