前言
前幾天面試遇到一個需求（easyui中combotree只能選子選項，父級不被選中），回來特意整理下，大概的思想是如果該tree的節點被選中是判定一下是否有子節點，如果沒有就說明是最終節點了，步驟如下：
1. 原來計划是看json數據的話有個children字段標識，后來用google的開發工具發現沒有，但是哥們發現了一個state字段，即父級的話會自動給一個state字段，為closed或者open值，但是最終子節點沒有這個字段，如下圖：
a. 選個子節點瞅瞅：
b. 選個父節點瞅瞅：
2. 找到合適的事件監聽，哥們在easyui的tree的api找到了這個：
onBeforeSelect：參數是node，解釋：節點被選中之前觸發,返回false取消選擇動作（取消動作，哥們看到這就亮了，莫名的雞凍）。
來靈感了吧，淡定淡定，開整。
代碼如下（代碼是easyui 1.3.2的demo里的文件路徑都一樣，不同的是哥們我把json數據寫到js里了，懶得發布測試，這樣直接可以看效果呢）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboTree</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" >
$(function(){
$('#cc').combotree({
onBeforeSelect:function(node){
alert(node.state);
if(node.state){
$("#cc").tree("unselect");
}
},
data:[{
"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"
}]
}]
});
});
</script>
</head>
<body>
<input id="cc" style="width:200px;">
</body>
</html>
有機會的話的和他探討一番，收工...........（記2014年3月26日面試）