如何使点击面板栏中的导航有条件

Question

我有一个基于远程数据源的面板栏，一切正常。提要中的一个属性与屏幕上的表单字段相结合，将决定用户是否可以单击面板栏中的子项并导航到 url，或者是否会出现警告对话框并且导航失败。

我正在使用以下技术来捕获提要中给定的 json 属性并将其与面板中的每个项目相关联：

    $("#panelbar").kendoPanelBar({
        dataSource: haRepList,
        template: "<span class=''repType'' data-url=''#= item.type #''>#= item.name #</span>",
        select: function(panel){
           var classId =  $(panel.item).find(".repType").data(''url'');
           if (classId !== ''undefined'') {
           alert(classId);
           }
        },
        dataTextField: ["name", "name"]
    });

因此，当我单击给定项目时，我会收到一条警告，告诉我类型属性是什么。我现在需要根据此值和屏幕上的另一个字段告诉面板 "Do not allow the click through url to work"。

Answer 1

您可以尝试 preventDefault、stopPropagation 或直接 return false:

$("#panelbar").kendoPanelBar({
    dataSource: haRepList,
    template: "<span class=''repType'' data-url=''#= item.type #''>#= item.name #</span>",
    select: function(panel){
       var classId =  $(panel.item).find(".repType").data(''url'');
       if (classId !== ''undefined'') {
           panel.preventDefault();
       }
    },
    dataTextField: ["name", "name"]
});

这是一个 link 工作 demo，其中第二个面板被有条件地禁用。希望这有帮助。

如何使点击面板栏中的导航有条件

How to make click through navigation in the panelbar conditional

kendo-ui

kendo-panelbar