禁用 Kendo-UI TreeView 节点

Disable a Kendo-UI TreeView node

我有一个 TreeView,当某些节点在其数据中包含 state_current != null(例如 demo 中的 "disable node" 按钮时,我想禁用它们。

我的代码是:

<script>
    $(document).ready(function() {

        var treeview = $('#Tree_view').kendoTreeView({
            template: "#= item.name #",
            dataSource: Parcours,
            dataTextField: 'name',
            loadOnDemand: true,
            expand: onExpandedItem
        });
    });

    function onExpandedItem(e) {

        var id_user = @Model.id;

        var item =  $('#Tree_view').data('kendoTreeView').dataItem(e.node)

        var type = item.fields.type;

        if (item.level() > 0) {
            item.id_parcours = item.parentNode().id_parcours;
            if (item.level() == 2) {
                item.id_promo = item.parentNode().id;
            }
        }
        else item.id_parcours = item.Id;

        switch (type) {
            case 'parcours':
                item.children.transport.options.read = {
                    url: '@Url.Action("Get_Session", "Users")' + '?user_id=' + id_user,
                    dataType: "json",
                };
                break;

            case 'session':
                item.children.transport.options.read = {
                    url: '@Url.Action("Get_Matiere")' + '?user_id=' + id_user,
                    dataType: "json"
                };
                break;

            default:
                break;
        }
    }

    var Matiere = {
        transport: {
            read: {
                url: '@Url.Action("Get_Matiere")',
                type: 'GET',
                dataType: 'json'
            }
        },
        schema: {
            model: {
                fields: {
                    name: 'Name',
                    type: 'matiere'
                },
                hasChildren: false,
            }
        }
    }

    var Session = {
        transport: {
            read: {
                url: '@Url.Action("Get_Session")',
                type: 'GET',
                dataType: 'json'
            }
        },
        schema: {
            model: {
                fields: {
                    id: 'IdPromo',
                    name: 'NamePromo',
                    type: 'session',
                    date: 'Date',
                    state: 'State_current',
                },
                hasChildren: true,
                children: Matiere
            }
        }
    }

    var Parcours = {
        transport: {
            read: {
                url: '@Url.Action("Get_Parcours", "Users")',
                data: {user_id: @Model.id},
                type: 'GET',
                dataType: 'json'
            }
        },
        schema: {
            model: {
                fields: {
                    id: 'Id',
                    name: 'Name',
                    type: 'parcours'
                },
                hasChildren: true,
                children: Session
            }
        }
    };
</script>

在您想禁用节点的地方执行此操作

var selectedNode = treeview.select();
    treeview.enable(selectedNode, false);

此处 treeview 应该是您的 treeview 对象,您可以 select 创建 treeview 后如下所示。而不是 selectedNode 你可以给你需要禁用的节点。

var treeview = $('#Tree_view').data("kendoTreeView");

如果你想在 treeview 首先呈现时执行此操作,你可以在 kendoTreeView 数据绑定事件中检查它,或者在 select 事件中检查,如果你想在 selecting.