EasyUI 中combotree 默认不能选择父节点的实现方法

在使用EasyUI框架进行前端开发时，`combotree`组件是一个非常实用的控件，它结合了下拉框和树形结构，常用于展示层级关系的数据。在某些场景下，我们可能希望用户只能选择最底层的节点（即叶子节点），而不能选择父节点。在标题和描述中提到的问题就是如何在EasyUI的`combotree`中实现默认不能选择父节点的功能。下面我们将详细讲解这个问题的解决方案。 要禁止选择父节点，我们需要在`combotree`的配置中添加一个属性`onlyLeafCheck`，并将其设置为`true`。这个属性的作用是只允许选择叶子节点，不允许选择非叶子节点，即父节点。例如： ```javascript onlyLeafCheck: true, ``` 接着，我们来看一下完整的`combotree`配置示例，这段代码中包含了一些关键事件处理函数，如`onbeforeselect`、`onClick`、`onLoadSuccess`和`onChange`，这些函数有助于实现我们的需求： ```javascript $('#artReason').combotree({ width: 200, method: 'GET', data: DicEtilolgy_data, idField: 'id', textField: 'name', parentField: 'pid', animate: true, mode: 'local', multiple: true, onlyLeafCheck: true, // 在选择节点前触发，如果返回false或者返回字符串'no'，则阻止选择 onbeforeselect: function (node) { debugger; if (node.state) { $("#artReason").tree("unselect"); } }, // 点击节点时触发，这里可以防止默认行为 onClick: function (data) { return; debugger; }, // 加载成功后触发 onLoadSuccess: function (node, data) { // 这里可以设置初始值，但注意如果设置了onlyLeafCheck，父节点会被自动取消选择 $("#artReason").combotree('setValue', ['11', '12']); }, // 选择节点时触发，可以用来检查是否为叶子节点 // 但由于我们已经设置了onlyLeafCheck，这个事件可能不会触发 //onSelect: function (node) { // debugger; // if (parseInt(node.id) < 10) { // $('#artReason').combotree('clear'); // return; // } // // 返回树对象 // var tree = $(this).tree; // // 选中的节点是否为叶子节点,如果不是叶子节点,清除选中 // var isLeaf = tree('isLeaf', node.target); // if (!isLeaf) { // // 清除选中 // $('#artReason').combotree('clear'); // } //}, // 选择值改变时触发，用于调试 onChange: function (newValue, oldValue) { debugger; }, // 过滤函数，用于搜索，这里未使用 //filter: function (q, row) { // debugger; // var opts = $(this).combobox("options"); // return row[opts.textField].indexOf(q) > -1; // 将从头位置匹配改为任意匹配 //} }); ``` 在上述代码中，`onbeforeselect`事件处理器用于在用户尝试选择节点之前进行干预。如果节点是已展开的状态（`node.state`为`true`），则会调用`tree("unselect")`方法取消选择，从而达到禁止选择父节点的效果。然而，由于我们已经启用了`onlyLeafCheck`，这个事件处理函数可能并不是必需的，因为`onlyLeafCheck`已经自动阻止了对非叶子节点的选择。 另外，`onClick`事件处理函数在这里被简单地阻止了默认行为，防止点击节点时触发选择。`onLoadSuccess`用于加载数据后的操作，例如设置初始选中值。`onSelect`事件处理函数在旧版的实现中用于检查是否为叶子节点，但现在由于`onlyLeafCheck`的存在，这部分代码可能不再需要。 `onChange`事件处理函数用于在选择值改变时进行调试。`filter`函数是用于搜索功能的，这里没有启用。 总结起来，要实现在EasyUI的`combotree`中默认不能选择父节点，只需设置`onlyLeafCheck`属性为`true`即可。如果需要自定义其他行为，可以通过配置相应的事件处理函数来实现。务必确保`data`参数包含正确的层级数据，包括`idField`、`textField`和`parentField`等必要字段，以便`combotree`能正确解析和显示层级结构。