1

我有一组从服务器返回的 JSON 对象，如下所示：

[{State: Finished, JobID: 1234, Owner: John}, {State: Finished, JobID: 5678, Owner: Joe}, {State: Active, JobID: 8765, Owner: Jane}, {State: Active, JobID: 4321，所有者：吉尔}]

我想把它放在一个层次结构的剑道 UI 网格中（不可分组，而是如http: //demos.kendoui.c​​om/web/grid/hierarchy.html 所示），主记录为状态（已完成，活动）和详细记录是每个“状态”关联的 JSON 对象的其余部分。由于没有像典型的 CustomerID/OrderID 等那样的主/从关系本身，我不认为网格的 detailInit 函数可以在这里工作（除非我为此创建自己的伪主/从关系？），但如果我错了，请纠正我。无论如何，让我知道我是否有可能在不跳过太多圈以到达终点的情况下做到这一点。在这里或 JSFiddle 中有一个小的工作示例也将是惊人的。：） 谢谢。

4

1 回答 1

1

您是否知道现有列表，State或者您可以在与您显示的请求不同的请求中获取它？如果是这样，您可以这样做：

var data = [
    {State: "Finished", JobID: 1234, Owner: "John"},
    {State: "Finished", JobID: 5678, Owner: "Joe"},
    {State: "Active", JobID: 8765, Owner: "Jane"},
    {State: "Active", JobID: 4321, Owner: "Jill"}
];

var element = $("#grid").kendoGrid({
    dataSource: {
        data    : [
            {State: "Finished"},
            {State: "Active"}
        ],
        pageSize: 10
    },
    height    : 450,
    sortable  : true,
    pageable  : true,
    detailInit: detailInit,
    columns   : [
        {
            field: "State",
            title: "State"
        }
    ]
});

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: function (operation) {
                    operation.success(data);
                }
            },
            pageSize : 6,
            filter   : { field: "State", operator: "eq", value: e.data.State }
        },
        scrollable: false,
        sortable  : true,
        pageable  : true,
        columns   : [
            { field: "State", width: 70 },
            { field: "JobID", title: "JobID", width: 100 },
            { field: "Owner", title: "Owner" }
        ]
    });
}

在这里，我将data其用作检索到的内容，但您可以在函数中DataSource为您更改.detailInitreadurl

如果您不知道现有的列表，states您可以在给定结果的情况下实现一个 JavaScript 函数DataSource，返回不同的列表State。它可以是这样的：

var data = null;

// Create a DataSource for reading the data
var dataSource = new kendo.data.DataSource({
    transport: {
        read: function (op) {
            data = ([
                {State: "Finished", JobID: 1234, Owner: "John"},
                {State: "Finished", JobID: 5678, Owner: "Joe"},
                {State: "Active", JobID: 8765, Owner: "Jane"},
                {State: "Active", JobID: 4321, Owner: "Jill"}
            ]);
            initGrid(data);
        }
    }
});
dataSource.read();

// Function that receives all the data and Creates a Grid after eliminating 
// duplicates States
function initGrid(data) {
    var element = $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: function (operation) {
                    var states = [];
                    var result = [];
                    $.each(data, function (idx, elem) {
                        if (!states[elem.State]) {
                            states[elem.State] = true;
                            result.push({ State: elem.State });
                        }
                    });
                    operation.success(result);
                }
            },
            pageSize : 10
        },
        height    : 450,
        sortable  : true,
        pageable  : true,
        detailInit: detailInit,
        columns   : [
            {
                field: "State",
                title: "State"
            }
        ]
    });
}

// Function that creates the inner Grid and uses originally read 
// data for avoiding going to the server again. 
function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: function (operation) {
                    operation.success(data);
                }
            },
            pageSize : 6,
            filter   : { field: "State", operator: "eq", value: e.data.State }
        },
        scrollable: false,
        sortable  : true,
        pageable  : true,
        columns   : [
            { field: "State", width: 70 },
            { field: "JobID", title: "JobID", width: 100 },
            { field: "Owner", title: "Owner" }
        ]
    });
}
于 2013-03-11T01:06:12.070 回答