如何在面板栏中使点击导航成为有条件的答案

【问题标题】：How to make click through navigation in the panelbar conditional如何在面板栏中使点击导航成为有条件的
【发布时间】：2019-07-11 10:07:51
【问题描述】：

我有一个基于远程数据源的面板栏，一切正常。提要中的一个属性与屏幕上的表单字段相结合，将确定用户是否可以单击面板栏中的子项并导航到 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"]
    });

因此，当我单击给定项目时，我会收到一条警报，告诉我 type 属性是什么。我现在需要根据这个值和屏幕上的另一个字段告诉面板“不允许点击 url 工作”。

【问题讨论】：

标签： kendo-ui kendo-panelbar

【解决方案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"]
});

这里是一个工作demo 的链接，其中第二个面板有条件地被禁用。希望这会有所帮助。

【讨论】：

完美：非常感谢