jQuery EasyUI combotree 只允许选叶子节点

jQueryEasyUI combotree组件使用技巧：限制选择非叶子节点并优化用户体验

最新推荐文章于 2021-08-16 23:18:50 发布

原创最新推荐文章于 2021-08-16 23:18:50 发布 · 9.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

asp.Net 同时被 2 个专栏收录

36 篇文章

订阅专栏

Web

1 篇文章

订阅专栏

本文详细介绍了如何利用jQueryEasyUI combotree组件实现仅允许选择叶子节点的功能，并通过实例展示了在选择非叶子节点后自动清空下拉框的操作，以提升用户交互体验。

jQuery EasyUI combotree 只允许选叶子节点

如果不是叶子节点，清除选中：

$('#ddtree').combotree( {  
    //选择树节点触发事件  
    onSelect : function(node) {  
        //返回树对象  
        var tree = $(this).tree;  
        //选中的节点是否为叶子节点,如果不是叶子节点,清除选中  
        var isLeaf = tree('isLeaf', node.target);  
        if (!isLeaf) {  
            //清除选中  
            $('#ddtree').combotree('clear');  
        }  
    }  
});

点击父节点后，下拉框变为空，很突兀，交互不好。改：

$('#ddtree').combotree({
    //选择树节点触发事件  
    onSelect : function(node) {  
        //返回树对象  
        var tree = $(this).tree;  
        //选中的节点是否为叶子节点,如果不是叶子节点,清除选中  
        var isLeaf = tree('isLeaf', node.target);  
        if (!isLeaf) {  
            //清除选中  
             $('#ddtree').treegrid("unselect");
        }  
    }  
});