web-dev-qa-db-ja.com

JSONデータを含むjqGridは、テーブルを空としてレンダリングします

Jqgridを作成しようとしていますが、テーブルが空です。テーブルはレンダリングされますが、データは表示されません。

Php呼び出しから返されるデータは次のとおりです。

{
"page":"1",
"total":1,
"records":"10",
"rows":[
{"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
{"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
{"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]},
{"id":"2:4","cell":["4","image","Voyageur Scout Award","Voyageur Scout Award is the right after Pioneer Scout.","0"]},
{"id":"2:5","cell":["5","image","Voyageur Citizenship","Learning about and caring for your community.","0"]},
{"id":"2:6","cell":["6","image","Fish and Wildlife","Demonstrate your knowledge and involvement in fish and wildlife management.","0"]},
{"id":"2:7","cell":["7","image","Photography","To recognize photography knowledge and skills","0"]},
{"id":"2:8","cell":["8","image","Recycling","Demonstrate your knowledge and involvement in Recycling","0"]},
{"id":"2:10","cell":["10","image","Voyageur Leadership ","Show leadership ability","0"]},
{"id":"2:11","cell":["11","image","World Conservation","World Conservation Badge","0"]}
]}

Javascriptの設定は次のようになります。

$("#"+tableId).jqGrid ({
    url:'getAwards.php?id='+classId,
    dataType : 'json',
    mtype:'POST',
    colNames:['Id','Badge','Name','Description',''],
    colModel : [
        {name:'awardId', width:30, sortable:true, align:'center'},
        {name:'badge', width:40, sortable:false, align:'center'},
        {name:'name', width:180, sortable:true, align:'left'},
        {name:'description', width:380, sortable:true, align:'left'},
        {name:'selected', width:0, sortable:false, align:'center'}
        ],
    sortname: "awardId",
    sortorder: "asc",
    pager: $('#'+tableId+'_pager'),
    rowNum:15,
    rowList:[15,30,50],
    caption: 'Awards',
    viewrecords:true,
    imgpath: 'scripts/jqGrid/themes/green/images',
    jsonReader : { 
        root: "rows", 
        page: "page", 
        total: "total", 
        records: "records", 
        repeatitems: true, 
        cell: "cell", 
        id: "id",
        userdata: "userdata", 
        subgrid: {root:"rows", repeatitems: true, cell:"cell" } 
    },
    width: 700,
    height: 200
});

HTMLは次のようになります。

<table class="awardsList" id="awardsList2" class="scroll" name="awardsList" />
<div id="awardsList2_pager" class="scroll"></div>

デフォルトのままにしようとしたので、jsonReaderを定義する必要があるかどうかはわかりません。 phpコードが役立つ場合は、私も投稿できます。

phpjavascriptjqueryjsonjqgrid
13
jgreep

私はそれを動かしました！

dataTypeフィールドはdatatypeである必要があります。大文字と小文字が区別されます。

20
jgreep

この問題は、スクリプトjquery.jqGrid.min.jsをその前に含める場合にも発生しますgrid.locale-en.js。コントローラのメソッド呼び出しに問題がある場合は、これを確認してください。

5
katrin

JqGrid3.6からjqGrid3.7.2に移行するときに同じ問題が発生しました。問題は、JSONが適切に二重引用符で囲まれていないことでした（JSON仕様で要求されているとおり）。 jqGrid 3.6は私の無効なJSONを許容しましたが、jqGrid3.7はより厳密です。

ここを参照してください： http://simonwillison.net/2006/Oct/11/json/

無効：

{
page:"1",
total:1,
records:"10",
rows:[
    {"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
    {"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
    {"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]}
]}

有効：

{
"page":"1",
"total":1,
"records":"10",
"rows":[
    {"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
    {"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
    {"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]}
]}
3
Rosdi Kasim

これは古い投稿かもしれませんが、他の人を助けるためだけに成功を投稿します。

JSONは次の形式である必要があります。

{
"rows": [
    {
        "id": 1,
        "cell": [
            1,
           "lname",
            "fname",
            "mi",
            phone,
            "cell1",
            "cell2",
            "address",
            "email"
        ]
    },
    {
        "id": 2,
        "cell": [
            2,
            "lname",
            "fname",
            "mi",
            phone,
            "cell1",
            "cell2",
            "address",
            "email"
        ]
    }
]

}

このモデルはZendで作成したので、気になったら使用できます。好きなように操作してください。

public function fetchall ($sid, $sord)
{
    $select = $this->getDbTable()->select(Zend_Db_Table::SELECT_WITH_FROM_PART);
    $select->setIntegrityCheck(false)
           ->join('Subdiv', 'Subdiv.SID = Contacts.SID', array("RepLastName" => "LastName", 
                                                                "Subdivision" => "Subdivision",
                                                                "RepFirstName" => "FirstName"))
           ->order($sid . " ". $sord);

    $resultset = $this->getDbTable()->fetchAll($select);
    $i=0;
    foreach ($resultset as $row) {
        $entry  = new Application_Model_Contacts();

        $entry->setId($row->id);
        $entry->setLastName($row->LastName);
        $entry->setFirstName1($row->FirstName1);
        $entry->setFirstName2($row->FirstName2);
        $entry->setHomePhone($row->HomePhone);
        $entry->setCell1($row->Cell1);
        $entry->setCell2($row->Cell2);
        $entry->setAddress($row->Address);
        $entry->setSubdivision($row->Subdivision);
        $entry->setRepName($row->RepFirstName . " " . $row->RepLastName);
        $entry->setEmail1($row->Email1); 
        $entry->setEmail2($row->Email2);

        $response['rows'][$i]['id'] = $entry->getId(); //id
        $response['rows'][$i]['cell'] = array (
                                                $entry->getId(),
                                                $entry->getLastName(),
                                                $entry->getFirstName1(),
                                                $entry->getFirstName2(),
                                                $entry->getHomePhone(),
                                                $entry->getCell1(),
                                                $entry->getCell2(),
                                                $entry->getAddress(),
                                                $entry->getSubdivision(),
                                                $entry->getRepName(),
                                                $entry->getEmail1(),
                                                $entry->getEmail2()
                                            );
        $i++;

    }
    return $response;
}
1
jejernig

私もそれを機能させました：データ型は正しいスペルです-例ではそのように示されていますが、ライブラリ内のeverything elseと矛盾しているため、間違えやすいです

私はこのまばらなドキュメントを追いかけるのに非常に疲れており、JavaScriptで使用するのに適切で適切なJSONが、XMLを支持して実際に短いカバレッジを与えられているように感じます。 PythonとJavaScriptを組み合わせたJSONは、非常に強力な組み合わせですが、この特定のライブラリとの絶え間ない苦労です。

次のような選択肢がある人：

1> jQuery UIテーマを適切にサポートします（角の丸みを含む！）（ http://datatables.net テーマのサポートがはるかに優れています）

2>列のサイズ変更を許可します（ http://datatables.net これはそのままではサポートされていません）

3>サブグリッドを許可します（ http://datatables.net イベントを通じて、ここでやりたいことを何でもできます）

私にお知らせください。インターフェースの残りの部分を合わせたものよりも、インターフェースのこの部分に多くの時間を費やしており、実際の例を探したり、「物事を試したり」することに費やされているのは、面倒です。

S

1
StuFuller

みんなはこれであなたを助けたいだけです。私は次の仕事をしました：

[〜＃〜] json [〜＃〜]

var mydata1 = { "page": "1", "total": 1, "records": "4","rows": [{ "id": 1, "cell": ["1", "cell11", "values1" ] },
    { "id": 2, "cell": ["2", "cell21", "values1"] },
    { "id": 3, "cell": ["3", "cell21", "values1"] },
    { "id": 4, "cell": ["4", "cell21", "values1"] }
]};

//重要な行の下にマークを付けます。データ型「json」の代わりに「jsonstring」が機能しました。

datatype: "jsonstring",

contentType: "application/json; charset=utf-8",

datastr: mydata1,

colNames: ['Id1', 'Name1', 'Values1'],

colModel: [
      { name: 'id1', index: 'id1', width: 55 },
      { name: 'name1', index: 'name1', width: 80, align: 'right', sorttype: 'string' },
      { name: 'values1', index: 'values1', width: 80, align: 'right', sorttype: 'string'}],

よろしく、

1
Anil Baviskar

私の場合、問題は次のPHPコード（jqGridデモから取得））によって引き起こされました。

$responce->page = $page;

ここで間違っているのは、次のとおりです。オブジェクトのプロパティページにアクセスしています$responce最初に作成せずに。これにより、Apacheは次のエラーメッセージを表示しました。

Strict Standards: Creating default object from empty value in /home/mariusz/public_html/rezerwacja/apps/frontend/modules/service/actions/actions.class.php on line 35

そして最後に、エラーメッセージはスクリプト内でjsonリーダーに送信されていました。

空のオブジェクトを作成して問題を修正しました。

$responce = new stdClass();
1
Mariusz

私はWAMP2.4で作業していましたが、この問題に夢中になりました。以前のバージョンのPHPや5.2のように、Windows XPで試したのと同じように、たくさんのことを試しました。 jqGridオプション。最後にOlegとMariuszに感謝します。唯一の行を見つけました。

$responce = new stdClass();

$ responceを使用する前にすべてを解決できましたが、今では私のグリッドはうまく機能しています!!!

ありがとう、友よ。

0
Alfx2

あなたのIDは正しいタイプではないと思います、私はそれがintであるべきだと思います。

特定のjsonについては、jsonreader設定は実際には必要ありません。あなたがリストしたものはとにかくデフォルトです、そしてあなたはあなたのjsonにサブグリッドを持っていません。

これを試して：

{
"page":"1",
"total":1,
"records":"10",
"rows":[
{"id":1 ,"cell":["1","image","Chief Scout","Highest Award test","0"]},
{"id":2,"cell":["2","image","Link Badge","When you are invested as a Scout, you maybe eligible to receive a Link Badge. (See page 45)","0"]},
{"id":3,"cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]},
{"id":4,"cell":["4","image","Voyageur Scout Award","Voyageur Scout Award is the right after Pioneer Scout.","0"]},
{"id":5,"cell":["5","image","Voyageur Citizenship","Learning about and caring for your community.","0"]},
{"id":6,"cell":["6","image","Fish and Wildlife","Demonstrate your knowledge and involvement in fish and wildlife management.","0"]},
{"id":7,"cell":["7","image","Photography","To recognize photography knowledge and skills","0"]},
{"id":8,"cell":["8","image","Recycling","Demonstrate your knowledge and involvement in Recycling","0"]},
{"id":9,"cell":["10","image","Voyageur Leadership ","Show leadership ability","0"]},
{"id":10,"cell":["11","image","World Conservation","World Conservation Badge","0"]}
]}
0
darren