EasyUI Combotree只选择叶子节点

Posted 2020-09-19 KnifezZZ~

EasyUI Combotree的方法拓展自Combo和Tree。而Tree有一个onBeforSelect事件来帮助我们实现只选择叶子节点的功能。

Tree事件需要 ‘node‘ 参数，它包括下列属性：

• id：绑定到节点的标识值。
• text：要显示的文本。
• iconCls：用来显示图标的 css class。
• checked：节点是否被选中。
• state：节点状态，‘open‘ 或 ‘closed‘。
• attributes：绑定到节点的自定义属性。
• target：目标的 DOM 对象。

onBeforeSelect

node

节点被选中前触发，返回 false 则取消选择动作。

    //只选中叶子节点        
    $(‘#ct‘).combotree({
                data: data,
                onBeforeSelect: function (node) {
                    if (!$(this).tree(‘isLeaf‘, node.target)) {
                        return false;
                    }
                },
                onClick: function (node) {
                    if (!$(this).tree(‘isLeaf‘, node.target)) {
                        $(‘#ct‘).combo(‘showPanel‘);
                    }
                }
            });
//不选中顶级节点                       
 onBeforeSelect: function (node) {
                   if ($(this).tree(‘getParent‘, node.target) == null) {
                               alert("禁止选择顶级节点");
                            }
                        },

通过“$(this).tree(‘isLeaf‘, node.target)” 判断当前选中节点是否包含子节点，若包含则返回false阻止选中，若不包含，则为叶子节点，可以正常选择。

还有一种需求只需要过滤顶级节点，其他节点均可选择。这种情况可以通过 $(this).tree(‘getParent‘, node.target) 获取当前选中节点的父项，如果该节点为顶级节点则获取值为null，所以通过判断是否为null来确定是否为顶级节点进行过滤。