版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/palmer_kai/article/details/81130580
easyui combtree 单选的时候实现 再次点击取消选中
原理
就是在 select 的时候判断当前节点是否选中， 选中了的话就通过改变 节点 的class 属性来取消选中， 并且清空combotree 的值。同时 return false ,让本次 select 不能实现选中
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboTree Actions - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script src="../jquery.min.js"></script>
<script src="../jquery.easyui.min.js"></script>
</head>
<body>
<h2>ComboTree Actions</h2>
<p>Click the buttons below to perform actions</p>
<div style="margin:20px 0">
<a href="javascript:vo <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script src="../jquery.min.js"></script>
<script src="../jquery.easyui.min.js"></script>
<script src="./data.js"></script>id(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
</div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="cc">
</div>
</div>
<script type="text/javascript">
function getValue() {
var val = $('#cc').combotree('getValue');
alert(val);
}
function setValue() {
$('#cc').combotree('setValue', '122');
}
function disable() {
$('#cc').combotree('disable');
}
function enable() {
$('#cc').combotree('enable');
}
$(function () {
$('#cc').combotree({
onBeforeSelect: function (node) {
// debugger;
var isSelected = $(node.target).hasClass('tree-node-selected');
if (isSelected) {
$(node.target).removeClass('tree-node-selected'); // 去除树上 节点的 class
$('#cc').combotree('clear'); // 同时需要 combobox 的值
return false; // 本次点击不选中
}
},
// unselect: fu
data: [{
id: 1,
text: 'Languages',
children: [{
id: 11,
state: 'close',
text: 'Java'
}, {
id: 12,
text: 'C++'
}]
}]
});
});
</script>
</body>
</html>