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

EasyUI Combotree只选择叶子节点

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只选择叶子节点