Question

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

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

我想把它放在层次结构Kendo UI网格中（不可分组，而是显示在http://demos.kendoui.com/web/grid/hierarchy.html），主记录为State（Finished，Active），详细记录是JSON的其余部分对象每个“状态”都与之相关联。由于没有像典型的CustomerID / OrderID等主要/细节关系本身，我不认为网格的detailInit函数可以在这里工作（除非我为此目的创建自己的伪主/细节关系？），但如果我错了，请纠正我。在任何情况下，让我知道，如果没有跳过太多的箍到达目的地，我甚至是可能的。在这里或在JSFiddle中有一个小的工作示例也是惊人的。 :)谢谢。

Answer 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函数detailInit read函数中的url {{1} }}

如果您不知道现有states的列表，则可以根据DataSource的结果实现JavaScript函数，返回不同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" }
        ]
    });
}

创建没有主/细节的Kendo UI层次结构网格

1 个答案: