創建沒有主控/明細的Kendo UI層次結構網格

Question

我從服務器返回的JSON對象數組如下所示：

[{狀態：已完成，作業ID：1234，所有者：約翰}，{狀態：已完成，作業ID：5678，所有者：喬}，{狀態：有效，作業ID：8765，所有者：簡}，{狀態：有效，作業ID： 4321，所有者：Jill}]

我想將其放置在層次結構Kendo UI網格中（無法分組，而是顯示在http://demos.kendoui.c​​om/web/grid/hierarchy.html ），主記錄為State（已完成，處於活動狀態），詳細記錄是與每個“狀態”相關聯的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作為檢索到的內容，但是您可以在函數detailInit中的DataSource中更改為您的url read函數。

如果您不知道現有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" }
        ]
    });
}