combotree 只能选中叶子节点
一、 Aphorism
人之所恶在好为人师，慎言之。
二、summary
应该分为两种情况：
1. 第一种情况（单选）： multiple == false
$('#tt').combotree({
nultiple: false,
onBeforeSelect: function (node) {
if (!$(this).tree('isLeaf', node.target)) {
return false;
}
}
// onBeforeCheck: function (node) {
// if (!$(this).tree('isLeaf', node.target)) {
// return false;
// }
// }
});
2. 第二种情况（多选）： multiple == true
$('#tt').combotree({
nultiple: true,
// onBeforeSelect: function (node) {
// if (!$(this).tree('isLeaf', node.target)) {
// return false;
// }
// },
onBeforeCheck: function (node) {
if (!$(this).tree('isLeaf', node.target)) {
return false;
}
}
});
所以两个都写上也没有问题，就是多做个事件处理。
三、粘贴代码
1. html 代码
html 中的依赖： js 文件和css 文件需要自己去 easyui 官网下载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboTree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic ComboTree</h2>
<p>Click the right arrow button to show the tree panel.</p>
<div style="margin:20px 0"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="tt" style="width: 100%;">
<!-- <input id="tt" class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',label:'Select Node:',labelPosition:'top'" style="width:100%"> -->
</div>
</div>
</body>
<script>
$('#tt').combotree({
url: 'tree_data1.json',
method:'get',
label: 'Select Node:',
labelPosition: 'top',
multiple: true,
onBeforeSelect: function (node) {
if (!$(this).tree('isLeaf', node.target)) {
return false;
}
},
onBeforeCheck: function (node) {
if (!$(this).tree('isLeaf', node.target)) {
return false;
}
}
});
</script>
</html>
2、tree_data1.json 文件
json 文件和html 文件放在一个目录下就好了
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
四、supplement
复写配置参数，可以解决很多bug
之前遇到过一次，combotree 中的值选中后在 box 中不能显示，原因可能是框架中对combotree 操作蛮多的，最终的解决方案是，通过jquery获取 dom ，然后对 combotree 进行复写，之后，每次选中节点， box 中就能正常显示了。
我记得在 处理datagrid 双表头问题的时候，也是 把gridDefined 复写后， initGrid ，之后双表头的 显示 bug 就消失了。当然，最终我采取的方案是 操作 td dom 元素，更简便写。
