创建剑道UI层次网格没有主/细节

Creating Kendo UI Hierarchy Grid with no Master/Detail

本文关键字：细节 网格 层次网 UI 层次 创建      更新时间：2023-09-26

我有一个JSON对象数组从服务器返回，看起来像下面的东西:

[{状态:完成，JobID: 1234，所有者:John}，{状态:完成，JobID: 5678，所有者:Joe}，{状态:激活，JobID: 8765，所有者:Jane}，{状态:激活，JobID: 4321，所有者:Jill}]

我想把它放在一个层次结构的剑道UI网格(不可分组，而是如http://demos.kendoui.com/web/grid/hierarchy.html所示)，主记录是状态(完成，活动)和详细记录是JSON对象的其余部分每个"状态"相关联。因为没有像典型的CustomerID/OrderID等那样的主/细节关系，所以我不认为网格的detailInit函数可以在这里工作(除非我为此目的创建自己的伪主/细节关系?)，但是如果我错了，请纠正我。在任何情况下，让我知道，如果我没有跳过太多的圈子，甚至可能到达那里。在这里或JSFiddle中有一个小的工作示例也很了不起。:)谢谢。

您是否知道现有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。

如果你不知道现有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" }
        ]
    });
}
相关文章：