0

我正在使用 kendo ui 创建丰富的用户界面，但我坚持以下几点：我想要一个带有子网格的网格，第一个显示客户信息，如姓名等，第二个显示可用的送货地址，客户得救了。现在我的问题是，子网格中不是数据，尽管萤火虫显示，数据已返回。这是我的来源：

$(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 页面获取数据，该页面执行 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 回答