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

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

[{State:Finished，JobID:1234，Owner:John}，{State:Finished，JobID:5678，Owner:Joe}，{State:Active，JobID:8765，Owner:Jane}，{State:Active，JobID:4321，Owner:Jill}]

---

我想把它放在一个层次结构的kendoui网格中（不是可分组的，而是如所示），主记录是State（Finished，Active），详细记录是每个“State”关联的JSON对象的其余部分。由于没有主/细节关系，比如典型的CustomerID/OrderID等，因此我认为网格的detailInit函数在这里不起作用（除非我为此创建了自己的伪主/细节关系），但如果我错了，请纠正我。不管怎样，让我知道，如果我不需要跳过太多的障碍就可以到达终点的话，我的梦想是否可能实现。在这里或在JSFiddle中有一个小的工作示例也将是惊人的谢谢。

您知道现有

状态的列表吗

或者您可以在不同于您显示的请求中获得它？如果是，您可以执行以下操作：

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" }
        ]
    });
}

---

您是否知道现有

状态的列表

，或者您可以在不同于您显示的请求中获取该列表？如果是，您可以执行以下操作：

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" }
        ]
    });
}

---

我确实知道状态列表，所以您的第一个代码示例工作得很好，但我将第二个版本保留在注释块中，以防应用程序的未来实现需要它。非常感谢您帮助一位Javascript/KendoUI新手。我在ASP.NET C世界里呆的时间太长了我有一个类似的问题，你能看一下吗：@OnaBaiI我确实知道状态列表，所以你的第一个代码示例工作得很好，但我将第二个版本保留在注释块中，以防应用程序的未来实现需要它。非常感谢您帮助一位Javascript/KendoUI新手。我在ASP.NET C世界里呆的时间太长了我也有类似的问题，你能看看这个：@OnaBai吗