首页 > 代码库 > EasyUI Combotree只选择叶子节点

EasyUI Combotree只选择叶子节点

2024-09-24 13:30:23   215人阅读

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来确定是否为顶级节点进行过滤。

 

EasyUI Combotree只选择叶子节点


联系
我们