javascript - KendoGrid - 隐藏有条件的详细信息列

Question

我正在使用 KendoGrid 控件来放置分层数据。但我想根据条件动态隐藏详细信息或子表中的列之一。子网格是在主网格的detailInit 函数的帮助下构建的。请建议或建议如何动态隐藏子表 col。

$(function () {
    $("#gridAudit").kendoGrid({
        dataSource: {
            data: partnergroups,
            schema: {
                model: {
                    fields: {
                        PartnerGroupID : {type: "number"},
                        PartnerName: { type: "string" },
                        OperationType: { type: "string" },
                        HasHistory: { type: "boolean" }
                    }
                }
            },
            pageSize: 10,
            sort: { field: "PartnerName", dir: "asc" }
        },
        height: 250,                    
        scrollable: true,                    
        sortable: true,
        filterable: true,                        
        detailInit: detailInitfunc,
        pageable: {
            input: true,
            numeric: true
        },
        columns: [
            { field: "PartnerName", title: "Partner Name", width: "150px" },
            { field: "OperationType", title: "Status", width: "80px" }
        ]
    }); //E.O. "kendoGrid" initialization   

});     //E.O. "DomReady"


function detailInitfunc(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: childgroups,
            filter: { field: "PartnerGroupID", operator: "eq", value: e.data.PartnerGroupID }
        },
        scrollable: false,
        sortable: false,
        pageable: false,
        columns: [
            { field: "PartnerName", title: "Partner Name", width: "150px" },
            { field: "OperationType", title: "Status", width: "80px" },
            { field: "Revert", title: "Action", width: "80px", template: '<i class="fa fa-floppy-o fontIcon" onclick="revertData(#=HistoryID#);" title="Revert the record"></i> ' }
        ]
    });
}  //E.O. "detailInitfunc"

我想根据来自主表的 OperationType 字段的值隐藏子表中的 Revert 列。

请提出修复建议。

Answer 1

这可以通过在创建详细信息网格时管理columns 属性来轻松完成。您已经拥有的信息，以及e.data(简短片段):

var columns = [
    { field: "PartnerName", title: "Partner Name", width: "150px" },
    { field: "OperationType", title: "Status", width: "80px" }
];

if (e.data.OperationType == "Type #1") {
    columns.push({ field: "Revert", title: "Action", width: "80px", template: '<i class="fa fa-floppy-o fontIcon" onclick="revertData(#=HistoryID#);" title="Revert the record"></i> ' });
}

$("<div/>").appendTo(e.detailCell).kendoGrid({
    columns: columns
});

Working Demo with Full Code

或者更简单，设置列的隐藏属性(缩短的代码段):

var hidden = false;

if (e.data.OperationType == "Type #1") {
    hidden = true;
}

$("<div/>").appendTo(e.detailCell).kendoGrid({
    columns: [{ field: "Revert", title: "Action", width: "80px", template: '<i class="fa fa-floppy-o fontIcon" onclick="revertData(#=HistoryID#);" title="Revert the record"></i> ', hidden: hidden }]
});

Working Demo with Full Code