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