1

次のようなサーバーから返されるJSONオブジェクトの配列があります。

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

これを階層KendoUIグリッド（グループ化可能ではなく、http： //demos.kendoui.c​​om/web/grid/hierarchy.htmlに示されているように）に配置し、マスターレコードをState（Finished、Active）とします。詳細レコードは、各「状態」が関連付けられている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 に答える