0

私は剣道UIを使用してリッチなユーザーインターフェイスを作成していますが、次のことに固執しています。サブグリッドを備えたグリッドが必要です。最初のグリッドには名前などの顧客情報が表示され、2番目のグリッドには利用可能な配送先住所が表示されます。顧客は保存しました。私の問題は、サブグリッドにデータがないことです。firebugは示していますが、データが返されたことを示しています。これは私の情報源です：

$(function() {
var main = $("#customer-grid").kendoGrid({
    dataSource: {
        transport:{
            read      :"data/users.php",
            update    :{
                url :"data/users.php?action=update",
                type:"POST",
                data: function (data) {
                    data.birthday = kendo.toString(data.birthday, "yyyy-MM-dd");
                    return data;
                    }
            },
            destroy:{
                url :"data/users.php?action=destroy",
                type:"POST"
            }
        },
        schema: {
            data: "data",
            model: {
                id: "id",
                fields: {
                    id: {editable: false},
                    activated: { type: "boolean" },
                    birthday: {type: "date"},
                    gender: {defaultValue: "W"}
                }
            }
        }
    },
    height: 250,
    filterable: true,
    sortable: true,
    pageable: true,
    detailInit: detailInit,
    dataBound: function() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    },
    columns: [{ 
                field: "id",
                title: "ID",
                width: "50px"
            }, { 
                field: "gender",
                title: "Geschlecht",
                width: "100px",
                values: data
            }, {
                field: "firstname",
                title: "Vorname"
            }, {
                field: "lastname",
                title: "Nachname"
            }, {
                field: "birthday",
                title: "Geburtstag",
                width: "100px",
                format: "{0:dd.MM.yyyy}"
            },{
                field: "mail",
                title: "E-Mail"
            },{
                field: "activated",
                title: "Aktiviert",
                width: "100px",
                values: actval                  
            }, { 
                command: ["edit", "destroy"], 
                title: " ", 
                width: "210px" 
            }],
            editable:{
                mode: "popup"
            }
});
});

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: "data/adress.php?uid="+e.data.id
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize:6
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: [
            { field: "id", width: 70 },
            { field: "zipcode", title:"Ship Country", width: 100 },
            { field: "city", title:"Ship Address" },
            { field: "street", title: "Ship Name", width: 200 }
        ]
    });
}

この関数は、phpページからデータを取得します。phpページはmysql-queryを実行し、データをapplication/jsonとして返します。しかし、何も表示されていません。

うまくいけば、皆さんは私を助けることができます。

よろしく

4

1 に答える 1

1

私はあなたのコードをテストしました、そしてそれはうまく働きます。

小切手：

  1. eパラメータ形式。私が使用した：detailInit({ detailCell : $("#grid"), data : { id : 1}});
  2. によって返されるJSON data/adress.php。私は戻ってきました：
[
    {"city":"Madrid", "id":"1", "zipcode":"31000", "street":"my street 1", "number":5},
    {"city":"Sofia", "id":"2", "zipcode":"32000", "street":"my street 2", "number":4},
    {"city":"London", "id":"3", "zipcode":"33000", "street":"my street 3", "number":3},
    {"city":"San Francisco", "id":"4", "zipcode":"34000", "street":"my street 4", "number":2},
    {"city":"Berlin", "id":"5", "zipcode":"35000", "street":"my street 5", "number":1}
]

次の（ハードコードされた）php応答を使用します。

<?php
header('Content-type: application/json');
$named_array = array(
    array("city" => "Madrid", "id" => "1", "zipcode" => "31000", "street" => "my street 1", "number" => 5),
    array("city" => "Sofia", "id" => "2", "zipcode" => "32000", "street" => "my street 2", "number" => 4),
    array("city" => "London", "id" => "3", "zipcode" => "33000", "street" => "my street 3", "number" => 3),
    array("city" => "San Francisco", "id" => "4", "zipcode" => "34000", "street" => "my street 4", "number" => 2),
    array("city" => "Berlin", "id" => "5", "zipcode" => "35000", "street" => "my street 5", "number" => 1)
);
echo json_encode($named_array);
?>

編集：これは、サブグリッドを含むグリッドの定義です。

var outer = $("#outer").kendoGrid({
    dataSource:{
        type:"json",
        transport:{
            read:"names.php"
        },
        pageSize:5
    },
    sortable:true,
    columns:[
        { field:"id", width:70 },
        { field:"name", title:"Name", width:100 },
        { field:"lastname", title:"LastName", width:100 },
        { title:"Address", width:300, attributes:{ class:"ob-address"}}
    ]
}).data("kendoGrid");

次に、ボタンをクリックして、次のコマンドを実行します。

$(".ob-address", outer.tbody).each(function (idx, elem) {
    detailInit({ detailCell:elem, data:{ id:1}});
});

ご覧のとおり、outerグリッド内の列にという名前のCSSクラスをマークするob-addressと、関数はテーブルの本体にあるすべてのセルを選択してouter、内部テーブル（サブグリッド）を挿入します。

于 2013-01-26T23:57:00.543 に答える